Skip to content
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

Closed
serjKim opened this issue Feb 28, 2018 · 9 comments
Closed

Overlapping pixels with opacity < 1 #18137

serjKim opened this issue Feb 28, 2018 · 9 comments
Labels
JavaScript Stale There has been a lack of activity on this issue and it may be closed soon.

Comments

@serjKim
Copy link

serjKim commented Feb 28, 2018

Is this a bug report?

yes

Have you read the Contributing Guidelines?

yes

Environment

  Environment:
    OS:  Windows 10 Pro
    Node:  6.11.3
    Yarn:  1.1.0
    npm:  3.10.9
    Watchman:  none
    Xcode:  none
    Android Studio:  Android Studio 3.0.1 Build #AI-171.4443003

  Packages: (wanted => installed)
    react-native: 0.53.0 => 0.53.0
    react: 16.2.0 => 16.2.0

Steps to Reproduce

  1. Change 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):

x

Also, reproduced on snack.expo.io:

expo

Reproducible Demo

https://snack.expo.io/SJBSNS4_G

@moooji
Copy link

moooji commented Mar 1, 2018

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).

@moooji
Copy link

moooji commented Mar 1, 2018

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?

@serjKim
Copy link
Author

serjKim commented Mar 1, 2018

a tiny gap between the items

yes, but the issue has the same root.

not a problem

No sure. For example, I don't used to see something similar with flex in the web view. Flex always worked fine.

In the case of opacity 1 the same thing happens, but it is not as visible, because the background colors
do not mix.

I knew. As I've mentioned, it's reproduced with opacity < 1

How does it look with 3 columns on the iPhone X?

Looks fine.
img_0236

on iphone 6x (https://snack.expo.io/SJBSNS4_G):
image

So, what should we do with the variable columns numbers?

@moooji
Copy link

moooji commented Apr 7, 2018

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.

@stale
Copy link

stale bot commented Jul 6, 2018

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.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Jul 6, 2018
@serjKim
Copy link
Author

serjKim commented Jul 6, 2018

it's still actual

@stale stale bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Jul 6, 2018
@serjKim
Copy link
Author

serjKim commented Sep 7, 2018

Seems that was fixed (https://snack.expo.io/@serj/react-native-issue-18137) with the latest version. Thanks everyone!

@stale
Copy link

stale bot commented Dec 6, 2018

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.

@stale stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Dec 6, 2018
@stale
Copy link

stale bot commented Dec 13, 2018

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.

@stale stale bot closed this as completed Dec 13, 2018
@facebook facebook locked as resolved and limited conversation to collaborators Dec 14, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
JavaScript Stale There has been a lack of activity on this issue and it may be closed soon.
Projects
None yet
Development

No branches or pull requests

4 participants