-
Notifications
You must be signed in to change notification settings - Fork 24.2k
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
Parent border is drawn over the child content #44690
Labels
Resolution: PR Submitted
A pull request with a fix has been provided.
Type: New Architecture
Issues and PRs related to new architecture (Fabric/Turbo Modules)
Comments
rafalmoneta
added
Needs: Triage 🔍
Type: New Architecture
Issues and PRs related to new architecture (Fabric/Turbo Modules)
labels
May 27, 2024
|
cc @j-piasecki |
I'll look into it |
cortinico
added
Resolution: PR Submitted
A pull request with a fix has been provided.
and removed
Needs: Triage 🔍
Newer Patch Available
labels
Jun 4, 2024
kosmydel
pushed a commit
to kosmydel/react-native
that referenced
this issue
Jun 11, 2024
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
Titozzz
pushed a commit
that referenced
this issue
Jun 18, 2024
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
Titozzz
pushed a commit
that referenced
this issue
Jun 18, 2024
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Labels
Resolution: PR Submitted
A pull request with a fix has been provided.
Type: New Architecture
Issues and PRs related to new architecture (Fabric/Turbo Modules)
Description
Starting from version 0.74.0 of React Native, when fabric is enabled, the border of the parent element is rendered over its children elements on iOS. You can refer to the provided screenshot to visualize this issue. This behavior mirrors what's observed in iOS with Swift. However, it lacks compatibility with Android.
Steps to reproduce
yarn ios
React Native Version
0.74.1
Affected Platforms
Runtime - iOS
Areas
Fabric - The New Renderer
Output of
npx react-native info
Stacktrace or Logs
Reproducer
https://github.com/rafalmoneta/react-native-border-issue
Screenshots and Videos
The text was updated successfully, but these errors were encountered: