-
Notifications
You must be signed in to change notification settings - Fork 24.6k
New issue
Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? # to your account
Fix border drawn over children on iOS #44777
Fix border drawn over children on iOS #44777
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Amazing job @j-piasecki! Thank you so much for this fix!
@cipolleschi has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator. |
Are the failing actions something I should be concerned with 😅? |
Nope it's a flaky internal test |
@cipolleschi merged this pull request in 91c5a6d. |
This pull request was successfully merged by @j-piasecki in 91c5a6d. When will my fix make it into a release? | How to file a pick request? |
Summary: Fixes facebook#44690 In the code responsible for drawing border on iOS there's a comment saying: > iOS draws borders in front of the content whereas CSS draws them behind the content. For this reason, only use iOS border drawing when clipping or when the border is hidden. The condition that follows checks whether the content is clipped and the width and alpha channel of the border: https://github.com/facebook/react-native/blob/e0a2e86d0346bd7e40adf69311daa538ca8c9c5f/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm#L643-L644. The problem is when the color is not set at all - `colorComponentsFromColor(borderMetrics.borderColors.left).alpha` will be equal to 0 since the relevant `SharedColor` is `null`: https://github.com/facebook/react-native/blob/e0a2e86d0346bd7e40adf69311daa538ca8c9c5f/packages/react-native/ReactCommon/react/renderer/graphics/platform/ios/react/renderer/graphics/HostPlatformColor.mm#L76-L86 Then it uses the path with the default iOS behavior (drawing the border on top of the content) instead of the custom one (with the border below) and it seems like it defaults to drawing black when the passed color is `nil`. This PR simply adds one more check to make sure the color is actually set before choosing the default platform behavior. ## Changelog: [IOS] [FIXED] - Fixed border being drawn over children when no color was set Pull Request resolved: facebook#44777 Test Plan: Tested on the code from the issue. |Before|After| |-|-| |<img width="546" alt="Screenshot 2024-06-04 at 11 18 14" src="https://github.com/facebook/react-native/assets/21055725/f13250a9-2e99-41c5-a9bc-02d65c00a6c0">|<img width="546" alt="Screenshot 2024-06-04 at 11 17 38" src="https://github.com/facebook/react-native/assets/21055725/f4571a5f-dfc4-4191-854c-fd3faf698b29">| Reviewed By: cortinico Differential Revision: D58131337 Pulled By: cipolleschi fbshipit-source-id: 7da247d81ecec586de6f0023e0cb399f9966213d
Summary: Fixes #44690 In the code responsible for drawing border on iOS there's a comment saying: > iOS draws borders in front of the content whereas CSS draws them behind the content. For this reason, only use iOS border drawing when clipping or when the border is hidden. The condition that follows checks whether the content is clipped and the width and alpha channel of the border: https://github.com/facebook/react-native/blob/e0a2e86d0346bd7e40adf69311daa538ca8c9c5f/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm#L643-L644. The problem is when the color is not set at all - `colorComponentsFromColor(borderMetrics.borderColors.left).alpha` will be equal to 0 since the relevant `SharedColor` is `null`: https://github.com/facebook/react-native/blob/e0a2e86d0346bd7e40adf69311daa538ca8c9c5f/packages/react-native/ReactCommon/react/renderer/graphics/platform/ios/react/renderer/graphics/HostPlatformColor.mm#L76-L86 Then it uses the path with the default iOS behavior (drawing the border on top of the content) instead of the custom one (with the border below) and it seems like it defaults to drawing black when the passed color is `nil`. This PR simply adds one more check to make sure the color is actually set before choosing the default platform behavior. ## Changelog: [IOS] [FIXED] - Fixed border being drawn over children when no color was set Pull Request resolved: #44777 Test Plan: Tested on the code from the issue. |Before|After| |-|-| |<img width="546" alt="Screenshot 2024-06-04 at 11 18 14" src="https://github.com/facebook/react-native/assets/21055725/f13250a9-2e99-41c5-a9bc-02d65c00a6c0">|<img width="546" alt="Screenshot 2024-06-04 at 11 17 38" src="https://github.com/facebook/react-native/assets/21055725/f4571a5f-dfc4-4191-854c-fd3faf698b29">| Reviewed By: cortinico Differential Revision: D58131337 Pulled By: cipolleschi fbshipit-source-id: 7da247d81ecec586de6f0023e0cb399f9966213d
Summary: Fixes #44690 In the code responsible for drawing border on iOS there's a comment saying: > iOS draws borders in front of the content whereas CSS draws them behind the content. For this reason, only use iOS border drawing when clipping or when the border is hidden. The condition that follows checks whether the content is clipped and the width and alpha channel of the border: https://github.com/facebook/react-native/blob/e0a2e86d0346bd7e40adf69311daa538ca8c9c5f/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm#L643-L644. The problem is when the color is not set at all - `colorComponentsFromColor(borderMetrics.borderColors.left).alpha` will be equal to 0 since the relevant `SharedColor` is `null`: https://github.com/facebook/react-native/blob/e0a2e86d0346bd7e40adf69311daa538ca8c9c5f/packages/react-native/ReactCommon/react/renderer/graphics/platform/ios/react/renderer/graphics/HostPlatformColor.mm#L76-L86 Then it uses the path with the default iOS behavior (drawing the border on top of the content) instead of the custom one (with the border below) and it seems like it defaults to drawing black when the passed color is `nil`. This PR simply adds one more check to make sure the color is actually set before choosing the default platform behavior. ## Changelog: [IOS] [FIXED] - Fixed border being drawn over children when no color was set Pull Request resolved: #44777 Test Plan: Tested on the code from the issue. |Before|After| |-|-| |<img width="546" alt="Screenshot 2024-06-04 at 11 18 14" src="https://github.com/facebook/react-native/assets/21055725/f13250a9-2e99-41c5-a9bc-02d65c00a6c0">|<img width="546" alt="Screenshot 2024-06-04 at 11 17 38" src="https://github.com/facebook/react-native/assets/21055725/f4571a5f-dfc4-4191-854c-fd3faf698b29">| Reviewed By: cortinico Differential Revision: D58131337 Pulled By: cipolleschi fbshipit-source-id: 7da247d81ecec586de6f0023e0cb399f9966213d
Summary:
Fixes #44690
In the code responsible for drawing border on iOS there's a comment saying:
The condition that follows checks whether the content is clipped and the width and alpha channel of the border:
react-native/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm
Lines 643 to 644 in e0a2e86
The problem is when the color is not set at all -
colorComponentsFromColor(borderMetrics.borderColors.left).alpha
will be equal to 0 since the relevantSharedColor
isnull
:react-native/packages/react-native/ReactCommon/react/renderer/graphics/platform/ios/react/renderer/graphics/HostPlatformColor.mm
Lines 76 to 86 in e0a2e86
Then it uses the path with the default iOS behavior (drawing the border on top of the content) instead of the custom one (with the border below) and it seems like it defaults to drawing black when the passed color is
nil
.This PR simply adds one more check to make sure the color is actually set before choosing the default platform behavior.
Changelog:
[IOS] [FIXED] - Fixed border being drawn over children when no color was set
Test Plan:
Tested on the code from the issue.