mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-01-12 22:51:09 +08:00
[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`.
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
Reference in New Issue
Block a user