Disable `translate3D` for list when scaling (fixes #24599)

src/vs/base/browser/browser.ts

@@ -124,7 +124,34 @@ export const isChrome = (userAgent.indexOf('Chrome') >= 0);
 export const isSafari = (userAgent.indexOf('Chrome') === -1) && (userAgent.indexOf('Safari') >= 0);
 export const isIPad = (userAgent.indexOf('iPad') >= 0);
 
-export const canUseTranslate3d = !isFirefox;
+const isChromev56 = (
+	navigator.userAgent.indexOf('Chrome/56.') >= 0
+	// Edge likes to impersonate Chrome sometimes
+	&& navigator.userAgent.indexOf('Edge/') === -1
+);
+
+export const supportsTranslate3d = !isFirefox;
+
+export function canUseTranslate3d(): boolean {
+	if (!supportsTranslate3d) {
+		return false;
+	}
+
+	if (getZoomLevel() !== 0) {
+		return false;
+	}
+
+	// see https://github.com/Microsoft/vscode/issues/24483
+	if (isChromev56) {
+		const pixelRatio = getPixelRatio();
+		if (Math.floor(pixelRatio) !== pixelRatio) {
+			// Not an integer
+			return false;
+		}
+	}
+
+	return true;
+}
 
 export const enableEmptySelectionClipboard = isWebKit;
 

src/vs/base/browser/ui/list/listView.ts

@@ -13,6 +13,8 @@ import { ScrollEvent, ScrollbarVisibility } from 'vs/base/common/scrollable';
 import { RangeMap, IRange, relativeComplement, each } from './rangeMap';
 import { IDelegate, IRenderer } from './list';
 import { RowCache, IRow } from './rowCache';
+import { isWindows } from "vs/base/common/platform";
+import { canUseTranslate3d } from "vs/base/browser/browser";
 
 interface IItem<T> {
 	id: string;
@@ -179,9 +181,14 @@ export class ListView<T> implements IDisposable {
 		rangesToInsert.forEach(range => each(range, i => this.insertItemInDOM(this.items[i], i)));
 		rangesToRemove.forEach(range => each(range, i => this.removeItemFromDOM(this.items[i])));
 
-		const transform = `translate3d(0px, -${renderTop}px, 0px)`;
-		this.rowsContainer.style.transform = transform;
-		this.rowsContainer.style.webkitTransform = transform;
+		if (canUseTranslate3d() && !isWindows /* Windows: translate3d breaks subpixel-antialias (ClearType) unless a background is defined */) {
+			const transform = `translate3d(0px, -${renderTop}px, 0px)`;
+			this.rowsContainer.style.transform = transform;
+			this.rowsContainer.style.webkitTransform = transform;
+		} else {
+			this.rowsContainer.style.top = `-${renderTop}px`;
+		}
+
 		this.lastRenderTop = renderTop;
 		this.lastRenderHeight = renderHeight;
 	}

src/vs/base/browser/ui/scrollbar/scrollableElement.ts

@@ -398,7 +398,7 @@ export class DomScrollableElement extends ScrollableElement {
 
 function resolveOptions(opts: ScrollableElementCreationOptions): ScrollableElementResolvedOptions {
 	let result: ScrollableElementResolvedOptions = {
-		canUseTranslate3d: opts.canUseTranslate3d && Browser.canUseTranslate3d,
+		canUseTranslate3d: opts.canUseTranslate3d && Browser.supportsTranslate3d,
 		lazyRender: (typeof opts.lazyRender !== 'undefined' ? opts.lazyRender : false),
 		className: (typeof opts.className !== 'undefined' ? opts.className : ''),
 		useShadows: (typeof opts.useShadows !== 'undefined' ? opts.useShadows : true),

src/vs/editor/browser/config/configuration.ts

@@ -16,13 +16,6 @@ import { FastDomNode } from 'vs/base/browser/fastDomNode';
 import { CharWidthRequest, CharWidthRequestType, readCharWidths } from 'vs/editor/browser/config/charWidthReader';
 import { IStorageService, StorageScope } from 'vs/platform/storage/common/storage';
 
-// See https://github.com/Microsoft/vscode/issues/24483
-const isChromev56 = (
-	navigator.userAgent.indexOf('Chrome/56.') >= 0
-	/* Edge likes to impersonate Chrome sometimes */
-	&& navigator.userAgent.indexOf('Edge/') === -1
-);
-
 class CSSBasedConfigurationCache {
 
 	private _keys: { [key: string]: BareFontInfo; };
@@ -376,20 +369,7 @@ export class Configuration extends CommonEditorConfiguration {
 	}
 
 	protected _getCanUseTranslate3d(): boolean {
-		if (!browser.canUseTranslate3d) {
-			return false;
-		}
-		if (browser.getZoomLevel() !== 0) {
-			return false;
-		}
-		if (isChromev56) {
-			const pixelRatio = browser.getPixelRatio();
-			if (Math.floor(pixelRatio) !== pixelRatio) {
-				// Not an integer
-				return false;
-			}
-		}
-		return true;
+		return browser.canUseTranslate3d();
 	}
 
 	protected _getPixelRatio(): number {