From 3f8624e25f644c305e923a6776acabc2f99e70a4 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Mon, 4 Jun 2018 09:46:50 -0700 Subject: [PATCH] [change] StyleSheet.hairlineWidth is whole pixel value Even on high DPI screens, browsers can round sub-pixel values down to `0`. This causes hairlineWidth borders/heights/etc not to be rendered. Revert `hairlineWidth` value back to `1`. --- .../src/exports/StyleSheet/StyleSheet.js | 3 +-- .../exports/StyleSheet/getHairlineWidth.js | 25 ------------------- 2 files changed, 1 insertion(+), 27 deletions(-) delete mode 100644 packages/react-native-web/src/exports/StyleSheet/getHairlineWidth.js diff --git a/packages/react-native-web/src/exports/StyleSheet/StyleSheet.js b/packages/react-native-web/src/exports/StyleSheet/StyleSheet.js index 1cd434d9..8a6b42ed 100644 --- a/packages/react-native-web/src/exports/StyleSheet/StyleSheet.js +++ b/packages/react-native-web/src/exports/StyleSheet/StyleSheet.js @@ -10,7 +10,6 @@ import StyleSheetValidation from './StyleSheetValidation'; import ReactNativePropRegistry from '../../modules/ReactNativePropRegistry'; import flattenStyle from './flattenStyle'; -import getHairlineWidth from './getHairlineWidth'; const absoluteFillObject = { position: 'absolute', @@ -43,7 +42,7 @@ const StyleSheet = { return result; }, flatten: flattenStyle, - hairlineWidth: getHairlineWidth() + hairlineWidth: 1 }; export default StyleSheet; diff --git a/packages/react-native-web/src/exports/StyleSheet/getHairlineWidth.js b/packages/react-native-web/src/exports/StyleSheet/getHairlineWidth.js deleted file mode 100644 index e2d47ff5..00000000 --- a/packages/react-native-web/src/exports/StyleSheet/getHairlineWidth.js +++ /dev/null @@ -1,25 +0,0 @@ -/** - * Based on http://dieulot.net/css-retina-hairline - * @noflow - */ - -import { canUseDOM } from 'fbjs/lib/ExecutionEnvironment'; - -const getHairlineWidth = () => { - let hairlineWidth = 1; - if (canUseDOM && window.devicePixelRatio && window.devicePixelRatio >= 2) { - const body = document.body; - if (body) { - const node = document.createElement('div'); - node.style.border = '.5px solid transparent'; - body.appendChild(node); - if (node.offsetHeight === 1) { - hairlineWidth = 0.5; - } - body.removeChild(node); - } - } - return hairlineWidth; -}; - -export default getHairlineWidth;