vscode: Electron 2.0.x: characters render duplicated when opacity is used in editor

Issue Type: Bug

In a JS or TS file create an unused import import * as unused from 'somewhere'

The editor then reads

import **asaunused from 'somewhere';

The text when copy and pasted is correct. The DOM looks correct. removing the opacity of the &nbsp elements fixes the issue.

VS Code version: Code - Insiders 1.25.0-insider (c51cf862a9604dffe2e3e8792a4b0a45213869a3, 2018-06-18T08:50:30.859Z) OS version: Windows_NT x64 10.0.16299

System Info

Item	Value
CPUs	Intel® Core™ i5-4670 CPU @ 3.40GHz (4 x 3392)
GPU Status	2d_canvas: enabled checker_imaging: disabled_off flash_3d: enabled flash_stage3d: enabled flash_stage3d_baseline: enabled gpu_compositing: enabled multiple_raster_threads: enabled_on native_gpu_memory_buffers: disabled_software rasterization: enabled video_decode: enabled video_encode: enabled webgl: enabled webgl2: enabled
Memory (System)	15.91GB (5.10GB free)
Process Argv	C:\Program Files\Microsoft VS Code Insiders\Code - Insiders.exe --disable-extensions
Screen Reader	no
VM	0%

Extensions disabled

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 18 (13 by maintainers)

Commits related to this issue

workaround for #52196 — committed to microsoft/vscode by bpasero 6 years ago

Most upvoted comments

To reproduce in Electrom:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
<style>
  .squiggly-inline-unnecessary {
  opacity: 0.6;
}
.view-line {
  font-family: "Monaco";
    font-weight: normal;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0px;
}
  </style>
<div style="top:21px;height:21px;" class="view-line"><span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk5 squiggly-inline-unnecessary">const</span><span class="mtk1 squiggly-inline-unnecessary">&nbsp;</span><span class="mtk13 squiggly-inline-unnecessary">a</span><span class="mtk1 squiggly-inline-unnecessary">&nbsp;</span><span class="mtk17 squiggly-inline-unnecessary">=</span><span class="mtk1 squiggly-inline-unnecessary">&nbsp;</span><span class="mtk9 squiggly-inline-unnecessary">`hdshhdasha;</span></span></div>

    <h1>Hello World!</h1>
    <!-- All of the Node.js APIs are available in this renderer process. -->
    We are using Node.js <script>document.write(process.versions.node)</script>,
    Chromium <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.

    <script>
      // You can also require other files to run in this process
      require('./renderer.js')
    </script>
  </body>
</html>

chrmarti on Jun 21, 2018