resizableImageWithCapInsets issue in iOS7

Question

I am following MessagesTableViewController and there is method of starching of UIImage for bubble view to strech as per text size. It is working fine with older ios version but in ios7 , it is displaying light color borders as we set UIEdgeInsetsMake as below.

+ (UIImage *)bubbleDefaultIncoming
{
  return [[UIImage imageNamed:@"bg-chat-white.png"] makeStretchableDefaultIncoming];
}

- (UIImage *)makeStretchableDefaultIncoming
{

  return [self resizableImageWithCapInsets:UIEdgeInsetsMake(15.0f,20.0f, 15.0f, 20.0f)
                            resizingMode:UIImageResizingModeStretch];
}

Here i attached 2 snapshot for ios6 and ios7 which describe how bubble View is behaving strange with ios7 though code is same. and

Someone has also same issue and reported in GITHUB HERE
I reviewed code so much and it seems that there is issue with resizableImageWithCapInsets in ios7. It generates borders as we set UIEdgeInsetsMake in the method.
Anyone has idea or solution to remove the borders from bubble view and make same as ios6 bubble view?
Any help would be appreciable. Thanks in advance.

Answer 1

Transparent lines are added in iOS 7 when the width or height is a number with floating point. As a workaround, you can round this numbers

Answer 2

You need to ensure that the CGRect you are drawing the image into is an even number and not a number with a floating point.

In addition to this if you have a UITableView with TabViewCells that have different heights you also need to need to ensure those cells all have heights that are an even number and not a number with a floating point.

Answer 3

i can confirm that both answers are right, but since you are using the same framework as me i going to give you a snippet to help.

just floor or ceil the size of the bubble and you are good to go.

- (CGRect)bubbleFrame
{
    CGSize bubbleSize = [JSBubbleView bubbleSizeForText:self.text];
    return CGRectMake((self.type == JSBubbleMessageTypeOutgoing ? floor(self.frame.size.width - bubbleSize.width) : 0),
                  kMarginTop,
                  floor(bubbleSize.width),
                  floor(bubbleSize.height));
}

edit: the position too need to be rounded up or down, since the kMarginTop already is you only need for it when it's a outgoing bubble. peace