Weird marker rendering glitches in scatter3d

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

Thanks for the report.

What is your operating system?

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

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

What is your operating system?

Sorry for the late reply, this is on win11

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.

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>

use charset utf8 in generated html (plotly/plotly.js#6491)

Navigation Menu

Repository navigation

Weird marker rendering glitches in `scatter3d` #6491

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Weird marker rendering glitches in scatter3d #6491

Description

Activity

archmoj commented on Feb 17, 2023

archmoj commented on Feb 17, 2023

archmoj commented on Feb 17, 2023

archmoj commented on Feb 17, 2023

kMutagene commented on Feb 17, 2023

archmoj commented on Feb 17, 2023

kMutagene commented on Feb 18, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Weird marker rendering glitches in `scatter3d` #6491