From 2f1dd3d0cba1fb6b1c4cf3d6e38d926f96736705 Mon Sep 17 00:00:00 2001 From: Jiye Kim Date: Tue, 14 May 2024 16:37:41 +0900 Subject: [PATCH 1/3] WRQ-7108: Remove unnecessary vendor prefixes Enact-DCO-1.0-Signed-off-by: Jiye Kim (jiye.kim@lge.com) --- packages/spotlight/src/utils.js | 5 ---- .../ui/Scrollable/ScrollThumb.module.less | 1 - packages/ui/Scrollable/Scrollbar.module.less | 5 +--- packages/ui/styles/core.less | 8 +------ packages/ui/styles/mixins.less | 23 ++++--------------- packages/ui/useScroll/Scrollbar.module.less | 5 +--- .../ui/useScroll/ScrollbarTrack.module.less | 1 - 7 files changed, 8 insertions(+), 40 deletions(-) diff --git a/packages/spotlight/src/utils.js b/packages/spotlight/src/utils.js index 118eb79819..924570b9a8 100644 --- a/packages/spotlight/src/utils.js +++ b/packages/spotlight/src/utils.js @@ -9,11 +9,6 @@ let elementMatchesSelector = function (selector) { }; if (typeof window === 'object') { elementMatchesSelector = window.Element.prototype.matches || - window.Element.prototype.matchesSelector || - window.Element.prototype.mozMatchesSelector || - window.Element.prototype.webkitMatchesSelector || - window.Element.prototype.msMatchesSelector || - window.Element.prototype.oMatchesSelector || elementMatchesSelector; } diff --git a/packages/ui/Scrollable/ScrollThumb.module.less b/packages/ui/Scrollable/ScrollThumb.module.less index e202646114..874b7864af 100644 --- a/packages/ui/Scrollable/ScrollThumb.module.less +++ b/packages/ui/Scrollable/ScrollThumb.module.less @@ -12,7 +12,6 @@ opacity: 0; flex: auto; - -webkit-transition: opacity 100ms linear; transition: opacity 100ms linear; will-change: transform, top, left, right; diff --git a/packages/ui/Scrollable/Scrollbar.module.less b/packages/ui/Scrollable/Scrollbar.module.less index b2da97d52c..9b6b2d9ceb 100644 --- a/packages/ui/Scrollable/Scrollbar.module.less +++ b/packages/ui/Scrollable/Scrollbar.module.less @@ -7,10 +7,7 @@ flex: none; transform: translateZ(0); - -webkit-transform: translateZ(0); transition: opacity 0.1s linear; - -moz-transition: opacity 0.1s linear; - -webkit-transition: opacity 0.1s linear; &.vertical { flex-direction: column; @@ -25,7 +22,7 @@ } &.corner { - -webkit-padding-end: 3px; + padding-inline-end: 3px; } /* ScrollThumb */ diff --git a/packages/ui/styles/core.less b/packages/ui/styles/core.less index c334b5e54b..2486c0a414 100644 --- a/packages/ui/styles/core.less +++ b/packages/ui/styles/core.less @@ -25,7 +25,7 @@ // Touch interaction .enact-no-touch-action { - -ms-touch-action: none; + touch-action: none; } .enact-untouchable { @@ -39,17 +39,11 @@ // Selection .enact-unselectable { cursor: default; - -ms-user-select: none; - -webkit-user-select: none; - -moz-user-select: -moz-none; user-select: none; } .enact-selectable { cursor: auto; - -ms-user-select: element; - -webkit-user-select: text; - -moz-user-select: text; user-select: text; } diff --git a/packages/ui/styles/mixins.less b/packages/ui/styles/mixins.less index 57cb6862ee..728e507f89 100644 --- a/packages/ui/styles/mixins.less +++ b/packages/ui/styles/mixins.less @@ -14,9 +14,6 @@ } .enact-composite() { - -webkit-transform: translateZ(0); - -ms-transform: translateZ(0); - -o-transform: translateZ(0); transform: translateZ(0); will-change: transform; } @@ -103,11 +100,11 @@ // */ .remove-margin-on-edge-children() { > :first-child { - -webkit-margin-start: 0; + margin-inline-start: 0; } > :last-child { - -webkit-margin-end: 0; + margin-inline-end: 0; } } @@ -117,11 +114,11 @@ // */ .remove-padding-on-edge-children() { > :first-child { - -webkit-padding-start: 0; + padding-inline-start: 0; } > :last-child { - -webkit-padding-end: 0; + padding-inline-end: 0; } } @@ -142,26 +139,17 @@ } .input-placeholder(@rule) { - &::-webkit-input-placeholder { - @rule(); - } - &::-moz-placeholder { + &::placeholder { @rule(); } } // Assign font-kerning rules in a non-proprietary way. Default value being "normal", to enable kerning. .font-kerning(@val: normal) { - -webkit-font-kerning: @val; font-kerning: @val; } -// Provide a set of rules to assign to each vendor-prefixed pseudo selector .vendor-fullscreen(@rule) { - &:-webkit-full-screen { @rule(); } - &:-moz-full-screen { @rule(); } - &:-ms-fullscreen { @rule(); } - &:-o-full-screen { @rule(); } &:fullscreen { @rule(); } } @@ -211,7 +199,6 @@ .border-box() { box-sizing: border-box; - -moz-box-sizing: border-box; } // Helpful debugging way to understand how LESS variables are being interpreted diff --git a/packages/ui/useScroll/Scrollbar.module.less b/packages/ui/useScroll/Scrollbar.module.less index 8dba32ce90..3c2d3641bf 100644 --- a/packages/ui/useScroll/Scrollbar.module.less +++ b/packages/ui/useScroll/Scrollbar.module.less @@ -9,10 +9,7 @@ flex: none; transform: translateZ(0); - -webkit-transform: translateZ(0); transition: opacity 0.1s linear; - -moz-transition: opacity 0.1s linear; - -webkit-transition: opacity 0.1s linear; &.vertical { flex-direction: column; @@ -27,7 +24,7 @@ } &.corner { - -webkit-padding-end: 3px; + padding-inline-end: 3px; } /* ScrollbarTrack */ diff --git a/packages/ui/useScroll/ScrollbarTrack.module.less b/packages/ui/useScroll/ScrollbarTrack.module.less index d3ec89da95..0daadd901f 100644 --- a/packages/ui/useScroll/ScrollbarTrack.module.less +++ b/packages/ui/useScroll/ScrollbarTrack.module.less @@ -14,7 +14,6 @@ opacity: 0; flex: auto; - -webkit-transition: opacity 100ms linear; transition: opacity 100ms linear; will-change: transform, top, left, right; From e44df51eb657573b2713bac5adf2906df75ed953 Mon Sep 17 00:00:00 2001 From: Jiye Kim Date: Fri, 21 Jun 2024 14:12:55 +0900 Subject: [PATCH 2/3] delete `-webkit-overflow-scrolling` and revert `-webkit-user-select` Enact-DCO-1.0-Signed-off-by: Jiye Kim (jiye.kim@lge.com) --- packages/ui/Scrollable/Scrollable.module.less | 4 ---- packages/ui/styles/core.less | 2 ++ packages/ui/useScroll/useScroll.module.less | 4 ---- 3 files changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/ui/Scrollable/Scrollable.module.less b/packages/ui/Scrollable/Scrollable.module.less index 5b8da98c36..48103298fc 100644 --- a/packages/ui/Scrollable/Scrollable.module.less +++ b/packages/ui/Scrollable/Scrollable.module.less @@ -35,8 +35,4 @@ overflow: hidden; flex: 1 1 100%; } - - .contentNative { - -webkit-overflow-scrolling: touch; - } } diff --git a/packages/ui/styles/core.less b/packages/ui/styles/core.less index 2486c0a414..39d7fdca5c 100644 --- a/packages/ui/styles/core.less +++ b/packages/ui/styles/core.less @@ -39,11 +39,13 @@ // Selection .enact-unselectable { cursor: default; + -webkit-user-select: none; user-select: none; } .enact-selectable { cursor: auto; + -webkit-user-select: text; user-select: text; } diff --git a/packages/ui/useScroll/useScroll.module.less b/packages/ui/useScroll/useScroll.module.less index bd8f72e75a..8e65b8445c 100644 --- a/packages/ui/useScroll/useScroll.module.less +++ b/packages/ui/useScroll/useScroll.module.less @@ -37,8 +37,4 @@ overflow: hidden; flex: 1 1 100%; } - - .scrollContentWrapperNative { - -webkit-overflow-scrolling: touch; - } } From 1bd91ecd81e26368f4bfb2acaf0eb4f67e019ac6 Mon Sep 17 00:00:00 2001 From: Jiye Kim Date: Tue, 25 Jun 2024 17:11:31 +0900 Subject: [PATCH 3/3] remove deleted css classnames in js code Enact-DCO-1.0-Signed-off-by: Jiye Kim (jiye.kim@lge.com) --- packages/ui/Scrollable/ScrollableNative.js | 2 +- packages/ui/useScroll/useScroll.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui/Scrollable/ScrollableNative.js b/packages/ui/Scrollable/ScrollableNative.js index cf185150f7..032dad283b 100644 --- a/packages/ui/Scrollable/ScrollableNative.js +++ b/packages/ui/Scrollable/ScrollableNative.js @@ -1328,7 +1328,7 @@ class ScrollableBaseNative extends Component { {className, containerRenderer, noScrollByDrag, rtl, style, ...rest} = this.props, {isHorizontalScrollbarVisible, isVerticalScrollbarVisible} = this.state, scrollableClasses = classNames(css.scrollable, className), - contentClasses = classNames(css.content, css.contentNative), + contentClasses = classNames(css.content), childWrapper = noScrollByDrag ? 'div' : TouchableDiv, childWrapperProps = { className: contentClasses, diff --git a/packages/ui/useScroll/useScroll.js b/packages/ui/useScroll/useScroll.js index 80cd55ebec..b6a635e8f4 100644 --- a/packages/ui/useScroll/useScroll.js +++ b/packages/ui/useScroll/useScroll.js @@ -1518,7 +1518,7 @@ const useScrollBase = (props) => { }); assignProperties('scrollContentWrapperProps', { - className: scrollMode === 'translate' ? [css.scrollContentWrapper] : [css.scrollContentWrapper, css.scrollContentWrapperNative], // scrollMode 'native' + className: [css.scrollContentWrapper], ...(!noScrollByDrag && { flickConfig, onDrag: onDrag,