[BUG]: Broken styling in plot rendered in an iframe

Offen

#7,688 erstellt am 16.1.2026 2 Kommentare 0 Reaktionen 1 zugewiesene Person Auf GitHub ansehen

@nathell arbeitet bereits daran.

Seit 21.1.2026.

Bewertung

Dieses Issue wurde noch nicht bewertet.

Beschreibung

bug

Description

A plot rendered within an iframe (same-domain, i.e. with access to the iframe’s dom) has broken styling when Plotly is loaded and runs from within the root document’s context.

This happens because Plotly attempts to add styles to the parent document, even when the plot div belongs to a child document: addRelatedStyleRule gets the HTMLStyleElement from document, rather than from graphDiv.ownerDocument.

Screenshots/Video

Broken rendering within iframe – note the misaligned title and mispositioned, always-visible modebar:

As compared to correct rendering:

Steps to reproduce

Create and open a file with this content:

<html>
  <body>
    <iframe id="content" style="width: 800px; height: 600px;"></iframe> <!-- Remove for just the reference rendering -->
    <script src="https://cdn.plot.ly/plotly-3.3.1.min.js"></script>
    <script>
      const doc = document.getElementById('content').contentDocument; // Replace with just `const doc = document;` to see the reference rendering
      doc.write('<div id="plot" style="width: 600px; height: 400px;"></div>');
      const plot = doc.getElementById('plot');
      Plotly.newPlot(plot, [{x: [1, 2, 3, 4, 5], y: [1, 2, 4, 8, 16]}], {title: {text: "Some plot"}});
    </script>
  </body>
</html>

Note wrong styling as per screenshot
Follow comments to compare with the correct rendering

Notes

My use case is to render Plotly graphs correctly in a Storybook-like component library (Portfolio, for ClojureScript). Portfolio renders components within iframes, which triggers the issue. I have a workaround that clones the element and associated styles from <style id="plotly.js-style-global"> to the iframe's document after the plot is rendered – this works, but is clunky.

Vorherrschende Sprache: JavaScript
Sterne: 18.3k
Forks: 2k
Ø Merge: 2 T. 10 Std.
Gemergte PRs (30 T.): 30

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
Forken Sie das Repository und arbeiten Sie in einem Branch.
Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus plotly/plotly.js

[CHORE]: Warn on config values that do not match the schema Offen

chore P3 plotly-internal size: 3 task

Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 77/100

plotly/plotly.js#8064 · Erstellt am 21.9.2026
[CHORE]: Change default to `true` for `responsive` config attribute Offen

chore P1 plotly-internal size: 1 task

Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 82/100

plotly/plotly.js#8034 · Erstellt am 10.9.2026
[CHORE]: Deprecate plotly.js-mapbox* npm packages Offen

chore P3 plotly-internal size: 1 task

Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 65/100

plotly/plotly.js#8029 · Erstellt am 08.9.2026
[mkdocs] Update link in Edit this Page button Offen

bug

Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 65/100

plotly/plotly.js#7648 · 3 Kommentare · Erstellt am 18.11.2025
BUILDING.md: minor typo and some Markdown syntax errors Offen

bug infrastructure P2

Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 65/100

plotly/plotly.js#6930 · Erstellt am 15.3.2024

Alle Issues in plotly/plotly.js