From ef770d4bd15ffc6824e0972b8d1907c73386284b Mon Sep 17 00:00:00 2001 From: Pawel Borkowski Date: Tue, 9 Jul 2019 14:33:55 +0200 Subject: [PATCH] [fix] Add support for browsers that implement scrollbar-width Close #1395 --- .../StyleSheet/__tests__/__snapshots__/compile-test.js.snap | 1 + packages/react-native-web/src/exports/StyleSheet/compile.js | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/compile-test.js.snap b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/compile-test.js.snap index c93b6b78..0f71ee5e 100644 --- a/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/compile-test.js.snap +++ b/packages/react-native-web/src/exports/StyleSheet/__tests__/__snapshots__/compile-test.js.snap @@ -64,6 +64,7 @@ Object { "rules": Array [ ".r-scrollbarWidth-2eszeu::-webkit-scrollbar{display:none}", ".r-scrollbarWidth-2eszeu{overflow:-moz-scrollbars-none;-ms-overflow-style:none}", + ".r-scrollbarWidth-2eszeu{scrollbar-width:none;}", ], "value": "none", }, diff --git a/packages/react-native-web/src/exports/StyleSheet/compile.js b/packages/react-native-web/src/exports/StyleSheet/compile.js index 2f8359ff..7582e3ba 100644 --- a/packages/react-native-web/src/exports/StyleSheet/compile.js +++ b/packages/react-native-web/src/exports/StyleSheet/compile.js @@ -148,9 +148,11 @@ function createAtomicRules(identifier: string, property, value): Rules { // https://drafts.csswg.org/css-scrollbars-1/ case 'scrollbarWidth': { if (value === 'none') { + const block = createDeclarationBlock({ [property]: value }); rules.push( `${selector}::-webkit-scrollbar{display:none}`, - `${selector}{overflow:-moz-scrollbars-none;-ms-overflow-style:none}` + `${selector}{overflow:-moz-scrollbars-none;-ms-overflow-style:none}`, + `${selector}${block}` ); } break;