From 1b8c395790c33674c21a90f40c53ce5503e48962 Mon Sep 17 00:00:00 2001 From: Benjamin Pasero Date: Tue, 17 Jul 2018 14:57:57 +0200 Subject: [PATCH 1/2] workaround for #52196 --- src/vs/editor/browser/services/codeEditorServiceImpl.ts | 2 +- src/vs/editor/browser/widget/codeEditorWidget.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/vs/editor/browser/services/codeEditorServiceImpl.ts b/src/vs/editor/browser/services/codeEditorServiceImpl.ts index 9fad9a52fe492..41c57f78dcb9e 100644 --- a/src/vs/editor/browser/services/codeEditorServiceImpl.ts +++ b/src/vs/editor/browser/services/codeEditorServiceImpl.ts @@ -212,7 +212,7 @@ class DecorationTypeOptionsProvider implements IModelDecorationOptionsProvider { const _CSS_MAP: { [prop: string]: string; } = { color: 'color:{0} !important;', - opacity: 'opacity:{0};', + opacity: 'opacity:{0}; will-change: opacity;', backgroundColor: 'background-color:{0};', outline: 'outline:{0};', diff --git a/src/vs/editor/browser/widget/codeEditorWidget.ts b/src/vs/editor/browser/widget/codeEditorWidget.ts index fcccb8daffcf2..ce41e136e3988 100644 --- a/src/vs/editor/browser/widget/codeEditorWidget.ts +++ b/src/vs/editor/browser/widget/codeEditorWidget.ts @@ -1805,7 +1805,7 @@ registerThemingParticipant((theme, collector) => { const unnecessaryForeground = theme.getColor(editorUnnecessaryCodeOpacity); if (unnecessaryForeground) { - collector.addRule(`.${SHOW_UNUSED_ENABLED_CLASS} .monaco-editor .${ClassName.EditorUnnecessaryInlineDecoration} { opacity: ${unnecessaryForeground.rgba.a}; }`); + collector.addRule(`.${SHOW_UNUSED_ENABLED_CLASS} .monaco-editor .${ClassName.EditorUnnecessaryInlineDecoration} { opacity: ${unnecessaryForeground.rgba.a}; will-change: opacity; }`); } const unnecessaryBorder = theme.getColor(editorUnnecessaryCodeBorder); From c1ab0a1317d3f735cb5bec4c40ddc86b52eb4458 Mon Sep 17 00:00:00 2001 From: Benjamin Pasero Date: Tue, 17 Jul 2018 15:02:05 +0200 Subject: [PATCH 2/2] add todos --- src/vs/editor/browser/services/codeEditorServiceImpl.ts | 2 +- src/vs/editor/browser/widget/codeEditorWidget.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/vs/editor/browser/services/codeEditorServiceImpl.ts b/src/vs/editor/browser/services/codeEditorServiceImpl.ts index 41c57f78dcb9e..aec6b1e4030c7 100644 --- a/src/vs/editor/browser/services/codeEditorServiceImpl.ts +++ b/src/vs/editor/browser/services/codeEditorServiceImpl.ts @@ -212,7 +212,7 @@ class DecorationTypeOptionsProvider implements IModelDecorationOptionsProvider { const _CSS_MAP: { [prop: string]: string; } = { color: 'color:{0} !important;', - opacity: 'opacity:{0}; will-change: opacity;', + opacity: 'opacity:{0}; will-change: opacity;', // TODO@Ben: 'will-change: opacity' is a workaround for https://github.com/Microsoft/vscode/issues/52196 backgroundColor: 'background-color:{0};', outline: 'outline:{0};', diff --git a/src/vs/editor/browser/widget/codeEditorWidget.ts b/src/vs/editor/browser/widget/codeEditorWidget.ts index ce41e136e3988..6d0718d94db5c 100644 --- a/src/vs/editor/browser/widget/codeEditorWidget.ts +++ b/src/vs/editor/browser/widget/codeEditorWidget.ts @@ -1805,7 +1805,7 @@ registerThemingParticipant((theme, collector) => { const unnecessaryForeground = theme.getColor(editorUnnecessaryCodeOpacity); if (unnecessaryForeground) { - collector.addRule(`.${SHOW_UNUSED_ENABLED_CLASS} .monaco-editor .${ClassName.EditorUnnecessaryInlineDecoration} { opacity: ${unnecessaryForeground.rgba.a}; will-change: opacity; }`); + collector.addRule(`.${SHOW_UNUSED_ENABLED_CLASS} .monaco-editor .${ClassName.EditorUnnecessaryInlineDecoration} { opacity: ${unnecessaryForeground.rgba.a}; will-change: opacity; }`); // TODO@Ben: 'will-change: opacity' is a workaround for https://github.com/Microsoft/vscode/issues/52196 } const unnecessaryBorder = theme.getColor(editorUnnecessaryCodeBorder);