Search code examples
swiftmacoscalayernsview

CALayer with rounded corners displays either black or foreign content

Here's what happened: I had a pretty much finalised app. I added a feature, which is completely unrelated to the GUI (so I think), I noticed a strange behaviour of GUI elements which have already been polished and worked flawlessly. After two weeks of playing around, disabling/enabling code, recreating and altering stuff I'm out of clues on how to solve this.

Take a look at this picture:

enter image description here

There are two bugs which appeared simultaneously and that's why I combine them into one question.

  1. I have a simple background view with .wantsLayer = true and .masksToBounds = true. On it I have multiple views with the same settings and a .cornerRadius to their layer. A few weeks ago this worked perfectly. Now I can see some (! not every) corner not actually being cut off but displaying (often simply black) content.
  2. Some corners show white content (top left). Some display the content of a completely different layer (the bottom views)!

To clarify: for debugging reasons I added a simple red layered view below the white one at the top of the picture. I expect the white view to have rounded corners (red!) both at the top and and bottom. However the top one is white (with a red line) and the bottom one isn't round at all. Second, and this one is weird to me, the bottom views do not have anything set to the colour red at all! The red coloured corners come from the colour of the top view's layer! If I make the top view's background view blue instead of red, the corners of the bottom views become blue as well.

What I found out so far:

  1. The corner thing normally happens when the parent view is not set to .maskToBounds = true. It is set in my example and also it worked before. How could I have messed this up without touching any related code or views in Interface Builder?
  2. I failed to find anything online regarding layers showing content of other layers in portions which should not be visible...

Any help would be highly appreciated!

Note: there's a drop shadow on the bottom views which is a completely different view underneath doing nothing but dropping a shadow. I forgot to remove it for the screenshot.

Solution

  • I don't know the reason behind this behaviour but I found a solution.

    One of the many views (with CALayers) and subviews is a NSProgressIndicator. And I assigned a Content Filter named "Hue Adjust" with the value of -0.5 to it, in order to have a different colour of the bar. Removing this Content Filter in Interface Builder solved the problem and the GUI looks again like it should:

    enter image description here

    I would still be interested to know why this happens and how I can keep my tinted progress bar without losing the corners...