Replace layer hinting using will-change: transform with transform: translate3d(0px, 0px, 0px) (microsoft#84214)

alexdima · alexdima · commit c6388baf2b15 · 2019-11-13T12:04:43.000+01:00
diff --git a/src/vs/base/browser/fastDomNode.ts b/src/vs/base/browser/fastDomNode.ts
@@ -205,7 +205,7 @@ export class FastDomNode<T extends HTMLElement> {
 			return;
 		}
 		this._layerHint = layerHint;
-		(<any>this.domNode.style).willChange = this._layerHint ? 'transform' : 'auto';
+		this.domNode.style.transform = this._layerHint ? 'translate3d(0px, 0px, 0px)' : '';
 	}
 
 	public setContain(contain: 'none' | 'strict' | 'content' | 'size' | 'layout' | 'style' | 'paint'): void {
diff --git a/src/vs/base/browser/ui/list/listView.ts b/src/vs/base/browser/ui/list/listView.ts
@@ -234,7 +234,7 @@ export class ListView<T> implements ISpliceable<T>, IDisposable {
 
 		this.rowsContainer = document.createElement('div');
 		this.rowsContainer.className = 'monaco-list-rows';
-		this.rowsContainer.style.willChange = 'transform';
+		this.rowsContainer.style.transform = 'translate3d(0px, 0px, 0px)';
 		this.disposables.add(Gesture.addTarget(this.rowsContainer));
 
 		this.scrollableElement = this.disposables.add(new ScrollableElement(this.rowsContainer, {
diff --git a/src/vs/base/browser/ui/progressbar/progressbar.css b/src/vs/base/browser/ui/progressbar/progressbar.css
@@ -35,7 +35,7 @@
 	animation-duration: 4s;
 	animation-iteration-count: infinite;
 	animation-timing-function: linear;
-	will-change: transform;
+	transform: translate3d(0px, 0px, 0px);
 }
 
 /**
diff --git a/src/vs/editor/common/config/editorOptions.ts b/src/vs/editor/common/config/editorOptions.ts
@@ -186,8 +186,8 @@ export interface IEditorOptions {
 	 */
 	fontLigatures?: boolean | string;
 	/**
-	 * Disable the use of `will-change` for the editor margin and lines layers.
-	 * The usage of `will-change` acts as a hint for browsers to create an extra layer.
+	 * Disable the use of `transform: translate3d(0px, 0px, 0px)` for the editor margin and lines layers.
+	 * The usage of `transform: translate3d(0px, 0px, 0px)` acts as a hint for browsers to create an extra layer.
 	 * Defaults to false.
 	 */
 	disableLayerHinting?: boolean;
diff --git a/src/vs/monaco.d.ts b/src/vs/monaco.d.ts
@@ -2597,8 +2597,8 @@ declare namespace monaco.editor {
 		 */
 		fontLigatures?: boolean | string;
 		/**
-		 * Disable the use of `will-change` for the editor margin and lines layers.
-		 * The usage of `will-change` acts as a hint for browsers to create an extra layer.
+		 * Disable the use of `transform: translate3d(0px, 0px, 0px)` for the editor margin and lines layers.
+		 * The usage of `transform: translate3d(0px, 0px, 0px)` acts as a hint for browsers to create an extra layer.
 		 * Defaults to false.
 		 */
 		disableLayerHinting?: boolean;
diff --git a/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css b/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css
@@ -84,7 +84,7 @@
 }
 
 .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dragged {
-	will-change: transform; /* forces tab to be drawn on a separate layer (fixes https://github.com/Microsoft/vscode/issues/18733) */
+	transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (fixes https://github.com/Microsoft/vscode/issues/18733) */
 }
 
 .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dragged-over div {
diff --git a/src/vs/workbench/browser/parts/notifications/media/notificationsToasts.css b/src/vs/workbench/browser/parts/notifications/media/notificationsToasts.css
@@ -30,7 +30,7 @@
 	transform: translateY(100%); /* move the notification 50px to the bottom (to prevent bleed through) */
 	opacity: 0; /*  fade the toast in */
 	transition:	transform 300ms ease-out, opacity 300ms ease-out;
-	will-change: transform, opacity; /* force a separate layer for the toast to speed things up */
+	transform: translate3d(0px, 0px, 0px); /* force a separate layer for the toast to speed things up */
 }
 
 .monaco-workbench > .notifications-toasts .notification-toast-container > .notification-toast.notification-fade-in {
@@ -42,4 +42,4 @@
 	opacity: 1;
 	transform: none;
 	transition:	none;
-}
+}

Original file line number	Diff line number	Diff line change
`@@ -205,7 +205,7 @@ export class FastDomNode<T extends HTMLElement> {`
`205`	`205`	`return;`
`206`	`206`	`}`
`207`	`207`	`this._layerHint = layerHint;`
`208`		`- (<any>this.domNode.style).willChange = this._layerHint ? 'transform' : 'auto';`
	`208`	`+ this.domNode.style.transform = this._layerHint ? 'translate3d(0px, 0px, 0px)' : '';`
`209`	`209`	`}`
`210`	`210`
`211`	`211`	`public setContain(contain: 'none' \| 'strict' \| 'content' \| 'size' \| 'layout' \| 'style' \| 'paint'): void {`
Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@`
`35`	`35`	`animation-duration: 4s;`
`36`	`36`	`animation-iteration-count: infinite;`
`37`	`37`	`animation-timing-function: linear;`
`38`		`- will-change: transform;`
	`38`	`+ transform: translate3d(0px, 0px, 0px);`
`39`	`39`	`}`
`40`	`40`
`41`	`41`	`/**`
Original file line number	Diff line number	Diff line change
`@@ -84,7 +84,7 @@`
`84`	`84`	`}`
`85`	`85`
`86`	`86`	`.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dragged {`
`87`		`- will-change: transform; /* forces tab to be drawn on a separate layer (fixes https://github.com/Microsoft/vscode/issues/18733) */`
	`87`	`+ transform: translate3d(0px, 0px, 0px); /* forces tab to be drawn on a separate layer (fixes https://github.com/Microsoft/vscode/issues/18733) */`
`88`	`88`	`}`
`89`	`89`
`90`	`90`	`.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dragged-over div {`