VolkerE has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/330344 )
Change subject: Improve and clarify GPU composite layer mixin
......................................................................
Improve and clarify GPU composite layer mixin
Improving and clarifying mixin to switch hardware
compositing mode in Webkit/Blink on. Using `translateZ()`
instead of `translate3d()` because it's shorter and has the same
effect.
Bug: T154460
Change-Id: I16a39a68f8234eb28eb1fe8327861d71938b6ecd
---
M src/styles/common.less
M src/styles/layouts/PanelLayout.less
M src/styles/widgets/ToggleSwitchWidget.less
M src/themes/apex/elements.less
M src/themes/apex/widgets.less
5 files changed, 11 insertions(+), 7 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/oojs/ui refs/changes/44/330344/1
diff --git a/src/styles/common.less b/src/styles/common.less
index ddc26eb..e65a34a 100644
--- a/src/styles/common.less
+++ b/src/styles/common.less
@@ -34,8 +34,13 @@
.oo-ui-background-image-svg-internal( @svg, @fallback );
}
-.oo-ui-force-webkit-gpu() {
- -webkit-transform: translate3d( 0, 0, 0 );
+// Only Webkit/Blink: Force element on own GPU composite layer
+// Can be used in order to help establish smooth, jank-free scrolling
+// in connection with CSS animations. Use sparely & wisely!
+// See T154460
+.oo-ui-force-gpu-composite-layer() {
+ -webkit-transform: translateZ( 0 );
+ transform: translateZ( 0 );
}
.oo-ui-animation( @value1, @value2: X, ... ) {
diff --git a/src/styles/layouts/PanelLayout.less
b/src/styles/layouts/PanelLayout.less
index 193b783..a843f91 100644
--- a/src/styles/layouts/PanelLayout.less
+++ b/src/styles/layouts/PanelLayout.less
@@ -5,8 +5,7 @@
&-scrollable {
overflow-y: auto;
- /* Make scrolling smooth */
- .oo-ui-force-webkit-gpu();
+ .oo-ui-force-gpu-composite-layer();
}
&-expanded {
diff --git a/src/styles/widgets/ToggleSwitchWidget.less
b/src/styles/widgets/ToggleSwitchWidget.less
index 985ddb9..6c8a36d 100644
--- a/src/styles/widgets/ToggleSwitchWidget.less
+++ b/src/styles/widgets/ToggleSwitchWidget.less
@@ -6,7 +6,7 @@
vertical-align: middle;
overflow: hidden;
.oo-ui-box-sizing( border-box );
- .oo-ui-force-webkit-gpu();
+ .oo-ui-force-gpu-composite-layer();
&.oo-ui-widget-enabled {
cursor: pointer;
diff --git a/src/themes/apex/elements.less b/src/themes/apex/elements.less
index 4f10a59..fb724de 100644
--- a/src/themes/apex/elements.less
+++ b/src/themes/apex/elements.less
@@ -191,7 +191,7 @@
&.oo-ui-buttonElement-pressed >
.oo-ui-buttonElement-button {
opacity: 0.5;
// Opacity causes 1px measurement errors in
Chrome, so force GPU rendering
- .oo-ui-force-webkit-gpu();
+ .oo-ui-force-gpu-composite-layer();
box-shadow: none;
color: #333;
background: #eee;
diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less
index 66a2817..afa6f30 100644
--- a/src/themes/apex/widgets.less
+++ b/src/themes/apex/widgets.less
@@ -599,7 +599,7 @@
&.oo-ui-widget-disabled {
opacity: 0.5;
// Opacity causes 1px measurement errors in Chrome, so force
GPU rendering
- .oo-ui-force-webkit-gpu();
+ .oo-ui-force-gpu-composite-layer();
box-shadow: none;
color: #333;
background: #eee;
--
To view, visit https://gerrit.wikimedia.org/r/330344
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I16a39a68f8234eb28eb1fe8327861d71938b6ecd
Gerrit-PatchSet: 1
Gerrit-Project: oojs/ui
Gerrit-Branch: master
Gerrit-Owner: VolkerE <volke...@wikimedia.org>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
