[iOS] Fixes strange gradient appears when using borderTopLeftRadius (or similar) not uniform#49531
[iOS] Fixes strange gradient appears when using borderTopLeftRadius (or similar) not uniform#49531zhongwuzw wants to merge 2 commits intofacebook:mainfrom
Conversation
…or similar) not uniform
facebook-github-bot
added
CLA Signed
|
Hmm I am not the most familiar with the implications of I would assume that there is some fix to the logic in the border drawing we have that would let us fix this problem without having to set this value, which would be ideal. If you want to tackle this issue can you go down that avenue as a potential solution? The code would live in |
|
@joevilches Thanks for the review, the border drawing seems to have no issue, the root cause is PS. |
|
Nice yeah given the prop already exists I think that makes more sense as a solution, especially if this is deeper problem within CALayer itself. Nice! |
| if (_props->shouldRasterize) { | ||
| _borderLayer.shouldRasterize = YES; | ||
| _borderLayer.rasterizationScale = self.traitCollection.displayScale; | ||
| } else { | ||
| _borderLayer.shouldRasterize = NO; | ||
| } |
There was a problem hiding this comment.
It might be a bit unintuitive that this magic border layer receives the effects of this prop, yet nothing else does. Does rasterizing the view-backing layer fix this issue too?
There was a problem hiding this comment.
Does rasterizing the view-backing layer fix this issue too?
@joevilches Yes, the paper arch uses a view-backing layer for border rendering https://github.com/facebook/react-native/blob/main/packages/react-native/React/Views/RCTView.m#L859-L862, also if user set shouldRasterizeIOS to enable rasterizing, it works.
There was a problem hiding this comment.
My question was more around, can we fix this issue with the weird gradient on the border if we JUST set shouldRasterize on the view-backing layer, and not on the border layer.
Originally I thought we were only using shouldRasterize on the border layer here (which I found confusing), but I see that the code does indeed already exist at https://github.com/facebook/react-native/blob/main/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm#L285 so we set it on the view-backing layer too.
So now I am wondering is this fixable by just setting shouldRasterizeIOS which maps to the view backing layer currently and wondering if you tested that beforehand (in a case where this border layer is present). If it does not then I think we are good to merge this!
There was a problem hiding this comment.
@joevilches Yes, you're right, #49615 also fixes this issue, we don't need to set it on the border layer. I'm going to close this. Thank you.
|
Close because #49615 already fixes this issue. |
3 participants
Summary:
Fixes #49442. We should enable Rasterize when we draw the contents by ourselves. Otherwise, it may produce strange gradient.
Changelog:
[IOS] [FIXED] - Fixes strange gradient appears when using borderTopLeftRadius (or similar) not uniform
Test Plan:
Repro please see #49442.