diff --git a/docs/storybook/2-apis/StyleSheet/StyleSheetScreen.js b/docs/storybook/2-apis/StyleSheet/StyleSheetScreen.js index 912fc3a5..8787a11b 100644 --- a/docs/storybook/2-apis/StyleSheet/StyleSheetScreen.js +++ b/docs/storybook/2-apis/StyleSheet/StyleSheetScreen.js @@ -104,7 +104,11 @@ StyleSheet.flatten([styles.listItem, styles.selectedListItem]);` typeInfo="object" /> - + ); diff --git a/src/apis/StyleSheet/getHairlineWidth.js b/src/apis/StyleSheet/getHairlineWidth.js new file mode 100644 index 00000000..6862a72f --- /dev/null +++ b/src/apis/StyleSheet/getHairlineWidth.js @@ -0,0 +1,22 @@ +/** + * 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 node = document.createElement('div'); + node.style.border = '.5px solid transparent'; + document.body.appendChild(node); + if (node.offsetHeight === 1) { + hairlineWidth = 0.5; + } + document.body.removeChild(node); + } + return hairlineWidth; +}; + +export default getHairlineWidth; diff --git a/src/apis/StyleSheet/index.js b/src/apis/StyleSheet/index.js index ada0a54d..5b115459 100644 --- a/src/apis/StyleSheet/index.js +++ b/src/apis/StyleSheet/index.js @@ -10,6 +10,7 @@ */ import flattenStyle from './flattenStyle'; +import getHairlineWidth from './getHairlineWidth'; import modality from '../../modules/modality'; import StyleRegistry from './registry'; @@ -58,7 +59,7 @@ const StyleSheet = { getStyleSheets() { return StyleRegistry.getStyleSheets(); }, - hairlineWidth: 1 + hairlineWidth: getHairlineWidth() }; export default StyleSheet;