plotly / plotly/plotly.js

[BUG]: Some plots render incorrectly when using virtual-webgl in Chromium browsers

Open
#7,764 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug P3 size: 3
Dominant language
JavaScript
Stars
18.3k
Forks
2k
Avg merge
2d 12h
Merged PRs (30d)
28

Description

Description

Some plots are rendering incorrectly (missing or muted colors) when using virtual-webgl in Chromium based browsers. This was originally reported in plotly/Kaleido#375.

Screenshots/Video
Without virtual-webgl With virtual-webgl
Image Image

See plotly/Kaleido#375 for more examples.

Steps to reproduce
  • Start plotly.js devtools
  • Open the mock 'gl2d_parcoords_constraints'
  • Note that there are number of dark red lines on the left side of the plot
  • Edit devtools/test_dashboard/index.html to include the following <script> tag in the body
    <script src="../../node_modules/virtual-webgl/src/virtual-webgl.js"></script>
    
  • Reload the mock
  • Note that a few of the dark red lines are now missing
Notes
  • This bug was discovered when development of Kaleido v1 started
  • The previous version of Kaleido (v0.2.1) used Chromium v88. Kaleido v1 uses the installed Chromium version (usually a pretty recent one).
  • At some point between the release of Chromium v88 and Chrome v112 (the oldest Chrome for Testing available here), the bug was introduced
  • It's unclear if it's a bug in Chromium, a bug in virtual-webgl, or a bug in plotly.js
  • Firefox doesn't have the issue, though colors do appear to render a differently for some plots when using/not using virtual-webgl
  • Chromium v147 shows the following console warnings when using virtual-webgl:
    virtual-webgl.js:389 WebGLRenderingContext.canvas is not supported
    (anonymous) @ virtual-webgl.js:389
    (anonymous) @ virtual-webgl.js:1008
    virtual-webgl.js:389 WebGLRenderingContext.drawingBufferColorSpace is not supported
    (anonymous) @ virtual-webgl.js:389
    (anonymous) @ virtual-webgl.js:1008
    virtual-webgl.js:389 WebGLRenderingContext.unpackColorSpace is not supported
    (anonymous) @ virtual-webgl.js:389
    (anonymous) @ virtual-webgl.js:1008
    virtual-webgl.js:389 WebGLRenderingContext.drawingBufferFormat is not supported
    (anonymous) @ virtual-webgl.js:389
    (anonymous) @ virtual-webgl.js:1008
    
  • Firefox v145 shows the following console warnings when using virtual-webgl:
    WebGLRenderingContext.canvas is not supported <anonymous code>:formatted:8942:27
    WebGLRenderingContext.drawingBufferColorSpace is not supported <anonymous code>:formatted:8942:27
    WebGLRenderingContext.unpackColorSpace is not supported <anonymous code>:formatted:8942:27
    
  • virtual-webgl support was added in plotly.js in #6784

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue with the gl2d_parcoords_constraints mock and the virtual-webgl script added to devtools/test_dashboard/index.html. Compare the affected Chromium behavior with Firefox and the Chromium versions noted in the report, then determine whether the missing lines originate in Chromium, virtual-webgl, or plotly.js; done means the plot renders consistently with virtual-webgl.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.