SVG costume pictures disappear & then reappear, when entering devtools via "inspect Element"

RESOLVED INVALID

Status

()

RESOLVED INVALID
4 years ago
4 years ago

People

(Reporter: dholbert, Unassigned)

Tracking

Trunk
x86_64
Linux
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(1 attachment)

(Reporter)

Description

4 years ago
STR:
 0. (Do not have devtools open yet)

 1. Load http://www.npr.org/blogs/money/2014/10/27/359324848/witches-vampires-and-pirates-5-years-of-americas-most-popular-costumes


 2. Right-click anywhere on the interactive chart (e.g. the upper-left bubble, labeled "witch")

 3. Choose "Inspect Element"

ACTUAL RESULTS: All the little costumed human figures in the chart briefly disappear and then reappear, while the inspector is loading.

EXPECTED RESULTS: No disappearing/reappearing.


FWIW: The chart is dynamically-generated SVG (which I believe comes from d3.js).
(Reporter)

Updated

4 years ago
Summary: SVG costume pictures blink away & then back, when entering devtools via "inspect Element" → SVG costume pictures disappear & then reappear, when entering devtools via "inspect Element"
(Reporter)

Comment 1

4 years ago
Created attachment 8513576 [details]
screencast of bug

Here's a screencast.

One other data point: This SVG content is rendered in an iframe (as shown by the "This frame >" submenu in the context menu). I can't reproduce the bug when I view the iframe's source URL [1] directly, or when I view it as an iframe-in-a-data-URI. I've only reproduced this on the original host page. This makes me wonder if there's a particular (fractional?) pixel offset that's required to trigger this, or something like that.

[1] http://apps.npr.org/dailygraphics/graphics/costumes/child.html?initialWidth=660&childId=responsive-embed-costumes

[2] data:text/html,<iframe marginheight="0" scrolling="no" src="http://apps.npr.org/dailygraphics/graphics/costumes/child.html?initialWidth=660&amp;childId=responsive-embed-costumes" frameborder="0" height="816px" width="100%"></iframe>
(Reporter)

Updated

4 years ago
Attachment #8513576 - Attachment description: screencast → screencast of bug
(Reporter)

Comment 2

4 years ago
It looks like the page just has some script that watches for viewport size changes, and rebuilds the SVG each time, which is why stuff disappears & reappears.

If I view the page in Responsive Design View (in which devtools don't impact the viewport-size), and perform the STR, then I *cannot reproduce* -- so that implies that this is purely caused by the impact of the devtools panel shrinking the viewport.

So, I think this just comes from scripting on the page, and it's behaving as it's supposed to.
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.