clipsToBounds causes UIImage to not display in iOS10 & XCode 8

Question

I switched my project over to new beta versions of iOS 10 and XCode 8. In all three areas of my app where I use:

imageView.layer.cornerRadius = imageView.frame.size.width/2
imageView.clipsToBounds = true

The associated images are not displaying at all. I have attempted cleaning the project as well as the build folder, restarting the device, trying on various simulators, re-adding the imageView, programmatically setting the associated UIImage instead of choosing one from the assets.

Removing the clipsToBounds line shows the rectangular image regardless of whether masksToBounds is true or false. How can I make a circular image in XCode8 / iOS10 ?

Edit: The project is Swift 2.x and not yet updated to Swift 3.0 syntax.

so it you remove the clipsToBounds setting statement, does the cornerRadius stop affecting the imageView and your image become again rectangular? — ddb, Aug 25 '16 at 06:49
@ddb yes, after removing the clipsToBounds statement, the image is rectangular and is visible. — cloudcal, Aug 25 '16 at 07:32
This answer: http://stackoverflow.com/questions/39380128/ios-10-gm-with-xcode-8-gm-causes-views-to-disappear-due-to-roundedcorners suggests calling self.layoutIfNeeded — Chris Spiller, Sep 08 '16 at 12:31
I don't think its an iOS10 problem. The behaviour also happens on iOS9. It's probably an XCode 8 bug or an intentional update to the layout cycle. — Teffi, Sep 15 '16 at 14:44
You should add layoutIfNeeded() before layer modifications. http://stackoverflow.com/a/39815405/3718570 — Ptah, Oct 02 '16 at 08:58

score 44 · Accepted Answer · edited May 23 '17 at 12:02

44

I had the same problem and calling layoutIfNeeded before all the rounded corner / clipsToBounds stuff fixed the issue. iOS 10 GM with xcode 8 GM causes views to disappear due to roundedCorners & clipsToBounds

edited May 23 '17 at 12:02

Community

1
1

answered Sep 11 '16 at 17:30

sudoExclaimationExclaimation

7,992
10
47
105

score 6 · Answer 2 · answered Sep 10 '16 at 03:07

This problem also happened to me.

I moved these code imageView.layer.cornerRadius = imageView.frame.size.width/2 from - (void)awakeFromNib to - (void)drawRect:(CGRect)rect and this problem went away.

My imageView is sized by autolayout. I think that height and width are not decided when awaking from nib on iOS 10.

score 2 · Answer 3 · edited May 23 '17 at 12:09

This sounds like it could be due to a new bug since iOS 10 and Xcode 8 where views are initialised at size 1000x1000 and when trying to set corner radius to half your frame, it is setting it to 500 instead. This is documented further in this question here: Since Xcode 8 and iOS10, views are not sized properly on viewDidLayoutSubviews. My reason for thinking this is the fix to the 1000x1000 issue it to call layout subviews before doing anything that requires sizes for something that has been constructed on the interface builder.

score 1 · Answer 4 · answered Sep 22 '16 at 19:41

I had the same problem. Not showing on the phone, but perfect on Storyboard and UI debugger. It was also working when I was putting the project "Opens with Xcode 7" instead of 8 but wasn't a satisfying solution. So I digged and found out the problem. The trouble was with a class looking like this :

@IBDesignable public class MyButton: UIButton {

   @IBInspectable var styleName: String = "" {
        didSet {
            switch styleName {
            case "RoundedLight":
                tintColor = UIColor.lightPinkColor()
                layer.borderColor = UIColor.whiteColor().CGColor
                layer.borderWidth = 1
                layer.masksToBounds = true
            default:
                break
            }
        }
    }

    override public func layoutSubviews() {
        super.layoutSubviews()

        switch styleName {
            case "RoundedLight":
                layer.cornerRadius = frame.height / 2
            default:
                break
        }
    }
}

I changed it to this and it works now :

@IBDesignable public class MyButton: UIButton {

   @IBInspectable var styleName: String = "" {
        didSet {
            layoutIfNeeded()
        }
    }

    override public func layoutSubviews() {
        super.layoutSubviews()

        switch styleName {
        case "RoundedLight":
            tintColor = UIColor.lightPinkColor()
            layer.borderColor = UIColor.whiteColor().CGColor
            layer.borderWidth = 1
            layer.cornerRadius = frame.height / 2
            layer.masksToBounds = true
        default:
            break
        }
    }
}

Note that none of the above worked for me, and I mean :

Calling layoutIfNeeded in the layoutSubviews()
Calling layoutIfNeeded in the awakeFromNib of my button (or my cell containing the button)
Calling layoutIfNeeded in the layoutSubview of my cell
Calling contentView.layoutIfNeeded() in the awakeFromNib of my cell
Calling view.layoutIfNeeded() in my view controller

score 1 · Answer 5 · answered Oct 28 '16 at 04:21

I had ImageView that is fully circular in shape. Below is code :

//MARK:- Misc functions
func setProfileImage() {
    imgProfile.layer.masksToBounds = false
    imgProfile.layer.cornerRadius = imgProfile.frame.size.height/2
    imgProfile.clipsToBounds = true
    imgProfile.contentMode = UIViewContentMode.ScaleToFill
}

This works fine in iOS 9. However, in iOS 10 Xcode 8 the ImageView disappears. After debugging found that ClipsToBound is culprit.

So placed the code in viewDidLayoutSubviews() resolved the issue.

override func viewDidLayoutSubviews() {
    setProfileImage()
}

You can also use self.view.layoutIfNeeded()

Yann Bodson · Answer 6 · 2016-08-25T06:39:57.817

0

It might be a layout issue. Setting clipToBounds to false would show the image even if its size is zero. Can you print the frame of your images?

If you set the cornerRadius and clipToBounds properties in viewDidLoad, try doing it in viewDidLayoutSubviews().

You could also try to call self.view.layoutIfNeeded().

edited Aug 25 '16 at 06:39

answered Aug 25 '16 at 06:09

Yann Bodson

1,634
1
17
29

I originally attempted setting corner radius and clipsToBounds in both viewDidLoad and viewDidAppear with no result. I attempted with viewDidLayoutSubviews to no avail as welll. When I enter the Debug View Hierarchy, I can see the frame for the UIImage within the UIImageView being drawn - just no image shown. It is also worth mentioning (I forgot in my original posting), that the project is still Swift 2.x and not updated to Swift 3.0 syntax. – cloudcal Aug 25 '16 at 07:35
printing the frame yields: (137.5, 24.0, 100.0, 100.0) – cloudcal Aug 25 '16 at 08:13

score 0 · Answer 7 · answered Sep 15 '16 at 14:32

0

Using obj-c, moving the syntax from viewDidLoad to viewDidLayoutSubviews worked for me.

answered Sep 15 '16 at 14:32

Teffi

2,498
4
21
40

andrey.krukovskiy · Answer 8 · 2016-09-21T14:51:50.993

I just implemented corner rounding like this

@implementation RoundImageView

- (instancetype)initWithCoder:(NSCoder *)coder
{
    self = [super initWithCoder:coder];
    if (self) {
        self.layer.masksToBounds = YES;
        self.layer.cornerRadius = MIN(self.bounds.size.height, self.bounds.size.width)/2;
        [self addObserver:self
               forKeyPath:@"bounds"
                  options:NSKeyValueObservingOptionNew
                  context:(__bridge void * _Nullable)(self)];
    }
    return self;
}

-(void)dealloc
{
    [self removeObserver:self
              forKeyPath:@"bounds"
                 context:(__bridge void * _Nullable)(self)];
}

-(void)observeValueForKeyPath:(NSString *)keyPath
                     ofObject:(id)object
                       change:(NSDictionary<NSString *,id> *)change
                      context:(void *)context
{
    if(context == (__bridge void * _Nullable)(self) && object == self && [keyPath isEqualToString:@"bounds"])
    {
        self.layer.cornerRadius = MIN(self.bounds.size.height, self.bounds.size.width)/2;
    }
}

@end

so I always have properly rounded corners. And I hadn't issues on upgrading to iOS10 and XCode8

score 0 · Answer 9 · answered Sep 22 '16 at 05:22

I think the problem happens because we set the round corner and clip subviews as @Pranoy C said.

I solved the problems by using layoutIfNeeded for the my tableview cell showing a user's profile picture. I want to ensure the image is round corner

Code is as follow: - (void)awakeFromNib { [super awakeFromNib]; [self layoutIfNeeded];

[self.inputIndicator_imageView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
self.profile_pic_edit_imageView.layer.cornerRadius = self.profile_pic_edit_imageView.frame.size.width/2;
self.profile_pic_edit_imageView.layer.borderWidth = 1.0;
self.profile_pic_edit_imageView.layer.borderColor = GRAY_COLOR_SUPER_LIGHT.CGColor;
self.profile_pic_edit_imageView.clipsToBounds = YES;}

score -1 · Answer 10 · answered Sep 09 '16 at 03:16

-1

You should call layoutSubviews() on the main view before call imageView.frame.size.width

[self.view layoutSubviews];
imageView.layer.cornerRadius = imageView.frame.size.width/2
imageView.clipsToBounds = true

answered Sep 09 '16 at 03:16

Leonardo Zanatta Barradas

1

You should never call `layoutSubviews` manually. Call `layoutIfNeeded` instead – Thorax Sep 17 '16 at 19:52

clipsToBounds causes UIImage to not display in iOS10 & XCode 8

10 Answers10

Linked