Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Antialiasing on borders when using mask or cornerRadius #503

Closed
tbaranes opened this issue Jun 22, 2017 · 5 comments
Closed

Antialiasing on borders when using mask or cornerRadius #503

tbaranes opened this issue Jun 22, 2017 · 5 comments

Comments

@tbaranes
Copy link
Member

@tbaranes tbaranes commented Jun 22, 2017

Didn't find a solution yet, we may have to find a another way to draw our borders

@JakeLin
Copy link
Member

@JakeLin JakeLin commented Jun 23, 2017

screen shot 2017-06-23 at 1 21 31 pm

I don't see this problem and I am using the latest release version of IBAnimatable with a UIView (width: 240, height: 128, borderWidth: 10, maskType: .circle)

@tbaranes
Copy link
Member Author

@tbaranes tbaranes commented Jun 23, 2017

Even when you run the app? I don't have it too in interface builder, only at runtime

@JakeLin
Copy link
Member

@JakeLin JakeLin commented Jun 27, 2017

simulator screen shot 27 jun 2017 10 37 08 am

It looks alright for me too when I run it on the simulator Xcode Version 8.2.1 (8C1002) & Simulator iOS 10 iPhone 7.

@tbaranes
Copy link
Member Author

@tbaranes tbaranes commented Jun 27, 2017

Ok, after a few tests directly in IBAnimatable, I've been able to reproduce it on iPad 2 and iPhone 6 simulators. I think it's 100% reproductible, but it will be visible only with a few colours (limitation of the eye? CALayer bug?). In my case, when setting a white background colour to the main view it was not visible, whereas with a dark background it was reproductible. I pushed hotfix/border_aliasing, you can directly run the project, you'll get the following render:

screen shot 2017-06-27 at 08 47 44

@SD10
Copy link
Member

@SD10 SD10 commented Jul 1, 2017

I was looking into this but have to put it on the backburner for the moment. I just wanted to provide some context for record keeping.

The color bleeding through is the main views layer. The reason this is happening is due to the behavior of the borderWidth property of CALayer.

From Apple documentation:

var borderWidth: CGFloat { get set }

It is composited above the receiver’s contents and sublayers and includes the effects of the
cornerRadius property.

The way to solve this is to not rely on this property if the layer.cornerRadius > 0. If there is a corner radius applied we will probably have to provide a custom CALayer to achieve the border.

@tbaranes tbaranes closed this Mar 31, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants