[BUG]: Broken styling in plot rendered in an iframe
Mantenedores costumam responder em até 1 dia
@nathell já está trabalhando nisso.
Desde 21/1/2026.
Avaliação
Esta issue ainda não foi avaliada.
Descrição
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.
- Linguagem predominante
- JavaScript
- Estrelas
- 18.4k
- Forks
- 2k
- Merge médio
- 1d 21h
- PRs com merge (30d)
- 18
Preparar o ambiente
- Sem Dockerfile nem arquivo Docker Compose
- Tem um modelo de pull request
- Ler o guia de contribuição
Primeiros passos
- Leia a issue inteira e depois o guia de contribuição do projeto.
- Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
- Faça um fork do repositório e trabalhe em uma branch.
- Abra um pull request que referencie o número da issue.
Mais de plotly/plotly.js
-
bug
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 78/100
Mantenedores costumam responder em até 1 dia
-
chore P3 plotly-internal size: 3 task
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 77/100
plotly/plotly.js#8064 · 1 comentário ·
Mantenedores costumam responder em até 1 dia
-
chore P1 plotly-internal size: 1 task
Dificuldade 1/5 Menos de uma hora Facilidade para iniciantes 82/100
Mantenedores costumam responder em até 1 dia
-
chore P3 plotly-internal size: 1 task
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 65/100
Mantenedores costumam responder em até 1 dia
-
bug
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 65/100
plotly/plotly.js#7648 · 3 comentários ·
Mantenedores costumam responder em até 1 dia
Todas as issues de plotly/plotly.js
Issues semelhantes
-
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 84/100
resend/resend-skills#144 ·
Mantenedores costumam responder em até 1 dia
-
[BUG] Traffic chart tests are flaky: the page's startup load overwrites the test's stubbed dataAbertabug
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 88/100
ScottKirvan/Smokey#33 ·
Mantenedores costumam responder em até 1 dia
-
bug
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 86/100
Ryan-Millard/Img2Num#681 · 2 comentários ·
Mantenedores costumam responder em até 2 dias
-
Dificuldade 1/5 Menos de uma hora Facilidade para iniciantes 75/100
bigskysoftware/htmx#4117 ·
Mantenedores costumam responder em até 2 dias
-
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 84/100
Mantenedores costumam responder em até 1 dia