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

StyleSheet.hairlineWidth not visible on devices with decimal PixelRatio #22927

Open
rvaitkus23 opened this issue Jan 9, 2019 · 7 comments

Comments

Projects
None yet
7 participants
@rvaitkus23
Copy link

commented Jan 9, 2019

Environment

Run react-native info in your terminal and paste its contents here.

  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
      Memory: 28.75 MB / 8.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 8.11.2 - ~/.nvm/versions/node/v8.11.2/bin/node
      Yarn: 1.12.3 - /usr/local/bin/yarn
      npm: 5.6.0 - ~/.nvm/versions/node/v8.11.2/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        Build Tools: 23.0.1, 23.0.3, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.3, 27.0.3
        API Levels: 21, 23, 25, 26, 27
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5014246
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.1 => 16.6.1
      react-native: 0.57.7 => 0.57.7
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-git-upgrade: 0.2.7

Description

StyleSheet.hairlineWidth works good for most of the devices. If device has pixel ratio that is not intiger it is not visible in some cases. For example, using in list it does render every second separator. And in some cases you can see background through list items, indicating that size of list item is calculated improperly.

I am facing this issue on Samsung S9+. Result of PixelRatio.get() is 2.625

@Oscarteg

This comment has been minimized.

Copy link

commented Jan 29, 2019

Same problem here on LG Nexus 5X. Some lines with the border width set to hairlinewidth are not showing. The PixelRatio.get() also gives me 2.625.

@johnroest

@warmherz

This comment has been minimized.

Copy link

commented Mar 9, 2019

Same problem here on Samsung S8+ when power saving mode is active (screen resolution: HD+/FHD+ only) When the resolution is WQHD+, all lines seem to be shown.

@cpojer cpojer referenced this issue Mar 19, 2019

Closed

RN Issue Triage Group 2 #24029

45 of 160 tasks complete

@react-native-bot react-native-bot added the Bug label May 4, 2019

@hramos hramos removed the Type: Bug Report label May 6, 2019

@lehresman

This comment has been minimized.

Copy link

commented Jun 29, 2019

I can confirm this on the Nexus 5 (pixel ratio of 2.625) and in my simulator of a Pixel 2 (pixel ratio 2.625).

@lehresman

This comment has been minimized.

Copy link

commented Jun 29, 2019

As an example, here is what I'm seeing. Notice how every other row in the list does not print a bottom border. The borderBottomWidth is set to StyleSheet.hairlineWidth.

image

@davidleee

This comment has been minimized.

Copy link

commented Jul 17, 2019

Sometimes this happens on iOS, already spotted this problem on an iPhone 7 Plus, but I couldn't find the pattern

@davidleee

This comment has been minimized.

Copy link

commented Jul 17, 2019

Sometimes this happens on iOS, already spotted this problem on an iPhone 7 Plus, but I couldn't find the pattern

Well, I've noticed that on iPhone Plus devices there will be a downsampling, so the actual pixel ratio would be 2.608.

@davidleee

This comment has been minimized.

Copy link

commented Jul 17, 2019

On iOS devices, since we know the exact native scale factor and UIKit scale factor,

thanks to https://developer.apple.com/library/archive/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html

my workaround would be to upsample manually if needed:

/*
 * scale / nativeScale = 3 / 2.608 ≈ 1.2
 */
const newHairlineWidth = StyleSheet.hairlineWidth * 1.2
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.