diff --git a/src/vs/base/browser/dom.ts b/src/vs/base/browser/dom.ts index 228550b57afe7003b4fa48b90f11174174037cfd..2915bcb44bb07a29f744b34a4b256d81d5fd17a2 100644 --- a/src/vs/base/browser/dom.ts +++ b/src/vs/base/browser/dom.ts @@ -1041,3 +1041,8 @@ export function domContentLoaded(): TPromise { } }); } + +export function hintGPULayer(target: HTMLElement): void { + // This is to hint browsers that this dom node is suited to live in its own layer (e.g. sliders, etc.) + (target.style).willChange = 'transform'; +} diff --git a/src/vs/base/browser/ui/scrollbar/abstractScrollbar.ts b/src/vs/base/browser/ui/scrollbar/abstractScrollbar.ts index c7194cbc5c5757baa6ad5bcf46886b6b642675b4..7a8743cb62a27c4707b036436acab2b85c1dffe1 100644 --- a/src/vs/base/browser/ui/scrollbar/abstractScrollbar.ts +++ b/src/vs/base/browser/ui/scrollbar/abstractScrollbar.ts @@ -170,6 +170,7 @@ export abstract class AbstractScrollbar extends Widget { this.domNode.setTransform('translate3d(0px, 0px, 0px)'); } else { this.domNode.setTransform(''); + DomUtils.hintGPULayer(this.domNode.domNode); } this._renderDomNode(this._scrollbarState.getRectangleLargeSize(), this._scrollbarState.getRectangleSmallSize()); diff --git a/src/vs/editor/browser/viewParts/minimap/minimap.ts b/src/vs/editor/browser/viewParts/minimap/minimap.ts index 1358242f406429e5c79abab590659df9e8c80578..70cb44e1523cb2ba386f3a28d5ebcb015b4df865 100644 --- a/src/vs/editor/browser/viewParts/minimap/minimap.ts +++ b/src/vs/editor/browser/viewParts/minimap/minimap.ts @@ -413,6 +413,7 @@ export class Minimap extends ViewPart { this._slider = createFastDomNode(document.createElement('div')); this._slider.setPosition('absolute'); this._slider.setClassName('minimap-slider'); + dom.hintGPULayer(this._slider.domNode); this._domNode.appendChild(this._slider); this._tokensColorTracker = MinimapTokensColorTracker.getInstance();