-
Notifications
You must be signed in to change notification settings - Fork 24.3k
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
Overlapping pixels with opacity < 1 #18137
Comments
Looks like rounding issues in the layout engine IMHO. Your first screenshot does not show overlap though, it looks actually like the opposite, a tiny gap between the items. If the items would overlap, the line would be darker (like in your second screenshot). |
Just guessing here, but the resolution in X-direction is 1125 for the iPhone X. If you try to render two items, they will be 562.5px each. So the layout engine can either round that up (you get overlap) or down (you get the gap like in 1). I believe this is simply a math problem caused by the odd resolution of the iPhone and not a problem that React Native causes or could possibly solve. In the case of opacity 1 the same thing happens, but it is not as visible, because the background colors do not mix. How does it look with 3 columns on the iPhone X? |
yes, but the issue has the same root.
No sure. For example, I don't used to see something similar with flex in the web view. Flex always worked fine.
I knew. As I've mentioned, it's reproduced with opacity < 1
on iphone 6x (https://snack.expo.io/SJBSNS4_G): So, what should we do with the variable columns numbers? |
OK perfect, the screenshot from the iPhone X seems to confirm that this is indeed simply a math problem. Since the phone cannot render 0.5px, there will always be a visible gap if the number of pixels in width cannot be exactly divided by the number of columns. The only way to "solve" that would be to render one column slightly larger than the other, which might look visually more pleasing in some scenarios, but is not as "correct" from a layout perspective because one column will then be 1px larger than the other. |
Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions. |
it's still actual |
Seems that was fixed (https://snack.expo.io/@serj/react-native-issue-18137) with the latest version. Thanks everyone! |
Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions. |
Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information. |
Is this a bug report?
yes
Have you read the Contributing Guidelines?
yes
Environment
Steps to Reproduce
styles.item.opacity
less than 1.Expected Behavior
View should be rendered without overlapping pixels.
Actual Behavior
I see some overlapping pixels between views. Reproduced on iPhone X (iOS v11.2.6):
Also, reproduced on snack.expo.io:
Reproducible Demo
https://snack.expo.io/SJBSNS4_G
The text was updated successfully, but these errors were encountered: