Do not use translate3d in overview ruler, use will-change instead (Microsoft/monaco-editor#426)

src/vs/editor/browser/viewParts/overviewRuler/decorationsOverviewRuler.ts

@@ -46,7 +46,6 @@ export class DecorationsOverviewRuler extends ViewPart {
 			'decorationsOverviewRuler',
 			this._context.viewLayout.getScrollHeight(),
 			this._context.configuration.editor.lineHeight,
-			this._context.configuration.editor.canUseTranslate3d,
 			this._context.configuration.editor.pixelRatio,
 			DecorationsOverviewRuler.MIN_DECORATION_HEIGHT,
 			DecorationsOverviewRuler.MAX_DECORATION_HEIGHT,
@@ -101,10 +100,6 @@ export class DecorationsOverviewRuler extends ViewPart {
 			this._overviewRuler.setLineHeight(this._context.configuration.editor.lineHeight, false);
 		}
 
-		if (e.canUseTranslate3d) {
-			this._overviewRuler.setCanUseTranslate3d(this._context.configuration.editor.canUseTranslate3d, false);
-		}
-
 		if (e.pixelRatio) {
 			this._overviewRuler.setPixelRatio(this._context.configuration.editor.pixelRatio, false);
 		}

src/vs/editor/browser/viewParts/overviewRuler/overviewRuler.ts

@@ -25,7 +25,6 @@ export class OverviewRuler extends ViewEventHandler implements IOverviewRuler {
 			cssClassName,
 			this._context.viewLayout.getScrollHeight(),
 			this._context.configuration.editor.lineHeight,
-			this._context.configuration.editor.canUseTranslate3d,
 			this._context.configuration.editor.pixelRatio,
 			minimumHeight,
 			maximumHeight,
@@ -48,10 +47,6 @@ export class OverviewRuler extends ViewEventHandler implements IOverviewRuler {
 			this._overviewRuler.setLineHeight(this._context.configuration.editor.lineHeight, true);
 		}
 
-		if (e.canUseTranslate3d) {
-			this._overviewRuler.setCanUseTranslate3d(this._context.configuration.editor.canUseTranslate3d, true);
-		}
-
 		if (e.pixelRatio) {
 			this._overviewRuler.setPixelRatio(this._context.configuration.editor.pixelRatio, true);
 		}

src/vs/editor/browser/viewParts/overviewRuler/overviewRulerImpl.ts

@@ -10,6 +10,7 @@ import { OverviewZoneManager, ColorZone, OverviewRulerZone } from 'vs/editor/com
 import { Color } from 'vs/base/common/color';
 import { OverviewRulerPosition } from 'vs/editor/common/config/editorOptions';
 import { ThemeType, LIGHT } from 'vs/platform/theme/common/themeService';
+import * as dom from 'vs/base/browser/dom';
 
 export class OverviewRulerImpl {
 
@@ -17,12 +18,11 @@ export class OverviewRulerImpl {
 	private _domNode: FastDomNode<HTMLCanvasElement>;
 	private _lanesCount: number;
 	private _zoneManager: OverviewZoneManager;
-	private _canUseTranslate3d: boolean;
 	private _background: Color;
 
 	constructor(
 		canvasLeftOffset: number, cssClassName: string, scrollHeight: number, lineHeight: number,
-		canUseTranslate3d: boolean, pixelRatio: number, minimumHeight: number, maximumHeight: number,
+		pixelRatio: number, minimumHeight: number, maximumHeight: number,
 		getVerticalOffsetForLine: (lineNumber: number) => number
 	) {
 		this._canvasLeftOffset = canvasLeftOffset;
@@ -31,10 +31,10 @@ export class OverviewRulerImpl {
 
 		this._domNode.setClassName(cssClassName);
 		this._domNode.setPosition('absolute');
+		dom.hintGPULayer(this._domNode.domNode);
 
 		this._lanesCount = 3;
 
-		this._canUseTranslate3d = canUseTranslate3d;
 		this._background = null;
 
 		this._zoneManager = new OverviewZoneManager(getVerticalOffsetForLine);
@@ -127,13 +127,6 @@ export class OverviewRulerImpl {
 		}
 	}
 
-	public setCanUseTranslate3d(canUseTranslate3d: boolean, render: boolean): void {
-		this._canUseTranslate3d = canUseTranslate3d;
-		if (render) {
-			this.render(true);
-		}
-	}
-
 	public setPixelRatio(pixelRatio: number, render: boolean): void {
 		this._zoneManager.setPixelRatio(pixelRatio);
 		this._domNode.setWidth(this._zoneManager.getDOMWidth());
@@ -156,11 +149,6 @@ export class OverviewRulerImpl {
 		if (this._zoneManager.getOuterHeight() === 0) {
 			return false;
 		}
-		if (this._canUseTranslate3d) {
-			this._domNode.setTransform('translate3d(0px, 0px, 0px)');
-		} else {
-			this._domNode.setTransform('');
-		}
 
 		const width = this._zoneManager.getCanvasWidth();
 		const height = this._zoneManager.getCanvasHeight();