Skip to content

Weird marker rendering glitches in scatter3d #6491

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
kMutagene opened this issue Feb 17, 2023 · 7 comments
Closed

Weird marker rendering glitches in scatter3d #6491

kMutagene opened this issue Feb 17, 2023 · 7 comments

Comments

@kMutagene
Copy link

kMutagene commented Feb 17, 2023 •
edited
Loading

The following html file:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.plot.ly/plotly-2.18.1.min.js"></script>
  </head>
  <body>
    <div id="57a4a499-302c-4550-8d8b-db70a1129fab">
      <!-- Plotly chart will be drawn inside this DIV -->
    </div>
    <script type="text/javascript">
      var renderPlotly_57a4a499302c45508d8bdb70a1129fab = function () {
        var data = [
          {
            type: "scatter3d",
            mode: "lines+markers",
            x: [1, 4],
            y: [2, 5],
            z: [3, 6],
            marker: {},
            line: {},
          },
        ];
        var layout = {
          width: 600,
          height: 600,
          scene: { camera: { projection: { type: "perspective" } } },
        };
        var config = { responsive: true };
        Plotly.newPlot(
          "57a4a499-302c-4550-8d8b-db70a1129fab",
          data,
          layout,
          config
        );
      };
      renderPlotly_57a4a499302c45508d8bdb70a1129fab();
    </script>
  </body>
</html>

leads to weird marker rendering bugs on chrome and edge(chromium), but not on firefox. Using any plotl.js version <2.17.0 fixes the issue. It is not reproducible for me via codepen though, so here are three browser window snapshots of this file:

  • Edge 110.0.1587.49
  • Chrome 110.0.5481.104
  • Firefox 110.0

image
@archmoj
Copy link
Contributor

archmoj commented Feb 17, 2023

Thanks for the report.

@archmoj
Copy link
Contributor

archmoj commented Feb 17, 2023

What is your operating system?

@archmoj
Copy link
Contributor

archmoj commented Feb 17, 2023

Confirmed.
Please note that regression is from the v2.17.0 release.

@archmoj archmoj added bug something broken regression this used to work and removed status: investigation needed labels Feb 17, 2023
@archmoj
Copy link
Contributor

archmoj commented Feb 17, 2023

And this regression is related to the webpack PR: #6355.

@kMutagene
Copy link
Author

What is your operating system?

Sorry for the late reply, this is on win11

@archmoj
Copy link
Contributor

archmoj commented Feb 17, 2023

The symptom of this was very strange.

Actually you should set charset to utf-8 in your script tag i.e.

<script charset="utf-8" src="https://cdn.plot.ly/plotly-2.18.1.min.js"></script>

which fixes the issue.

@archmoj archmoj changed the title Weird marker rendering glitches in 3D charts on edge/chrome Weird marker rendering glitches in scatter3d Feb 17, 2023
@kMutagene
Copy link
Author

Actually you should set charset to utf-8 in your script tag

Thanks for this, using a meta tag for the whole page also works, which is recommended to do by the w3c anyways, so that's what i will do as a workaround with additional benefits.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="https://cdn.plot.ly/plotly-2.18.1.min.js"></script>
  </head>
  <body>
    <div id="57a4a499-302c-4550-8d8b-db70a1129fab">
      <!-- Plotly chart will be drawn inside this DIV -->
    </div>
    <script type="text/javascript">
      var renderPlotly_57a4a499302c45508d8bdb70a1129fab = function () {
        var data = [
          {
            type: "scatter3d",
            mode: "lines+markers",
            x: [1, 4],
            y: [2, 5],
            z: [3, 6],
            marker: {},
            line: {},
          },
        ];
        var layout = {
          width: 600,
          height: 600,
          scene: { camera: { projection: { type: "perspective" } } },
        };
        var config = { responsive: true };
        Plotly.newPlot(
          "57a4a499-302c-4550-8d8b-db70a1129fab",
          data,
          layout,
          config
        );
      };
      renderPlotly_57a4a499302c45508d8bdb70a1129fab();
    </script>
  </body>
</html>

kMutagene added a commit to plotly/Plotly.NET that referenced this issue Feb 18, 2023
@kMutagene
use charset utf8 in generated html (plotly/plotly.js#6491)
a70e885
@archmoj archmoj removed bug something broken regression this used to work labels Feb 20, 2023
@archmoj archmoj closed this as completed Feb 20, 2023
@not522 not522 mentioned this issue Mar 17, 2023
Merged
5 tasks
@archmoj archmoj mentioned this issue Apr 19, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@kMutagene @archmoj