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

Open
tbaranes opened this Issue Jun 22, 2017 · 5 comments

Comments

Projects
None yet
3 participants
@tbaranes
Copy link
Member

tbaranes commented Jun 22, 2017

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

@tbaranes tbaranes added the type: bug label Jun 22, 2017

@JakeLin

This comment has been minimized.

Copy link
Member

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

This comment has been minimized.

Copy link
Member Author

tbaranes commented Jun 23, 2017

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

@JakeLin

This comment has been minimized.

Copy link
Member

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

This comment has been minimized.

Copy link
Member Author

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

This comment has been minimized.

Copy link
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment