| Summary: | Browser doesn't reflow a web component | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Jeroen Zwartepoorte <jeroen.zwartepoorte> | ||||||
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> | ||||||
| Status: | RESOLVED INVALID | ||||||||
| Severity: | Normal | CC: | bfulgham, simon.fraser, smoley, svillar, webkit-bug-importer, zalan | ||||||
| Priority: | P2 | Keywords: | InRadar | ||||||
| Version: | Safari Technology Preview | ||||||||
| Hardware: | Unspecified | ||||||||
| OS: | Unspecified | ||||||||
| Attachments: |
|
||||||||
Please provide a standalone test case, or the URL of a page where we can reproduce this. I don't have time to create a standalone test case unfortunately, but if you go here: http://dna.iddinkgroup.com/components/shell/examples/m6 (icl/icl) you'll find a design system example page. That's where the devtools screenshot was taken. If you disable the :host([short]) { display: flex; } rule on "dna-magister-logo svg" then you should be able to reproduce the issue by clicking the "Collapse"/"Expand" button at the bottom. It will look like the second screenshot. Created attachment 416341 [details]
Bug screenshot
Sorry, my earlier comment was rushed and incorrect. Here are the steps to reproduce the bug: 1. Go to http://dna.iddinkgroup.com/components/shell/examples/m6 (icl/icl) 2. Click "Collapse" at the bottom of the page 3. Open devtools (make sure browser is wide enough, or devtools is docked at the bottom, because the page is responsive) 4. Go to "dna-magister-logo" element in the devtools 5. Disable the ":host([short]) { display: flex; }" rule 6. Click the expand button at the bottom (>>) 7. Watch the logo appear really small at the top of the page (34px wide, even though the element is display: block) 8. Triggering a reflow will fix this issue and make the logo appear large again (you can do this by toggling the ":host { display: block }" rule on "dna-magister-logo" That's the bug. Chrome and Firefox do not suffer from this bug. My *guess* is that size change happens on the svg element inside the Shadow DOM and somehow that isn't detected (because it happens in the Shadow DOM). Closing as I'm the originally reporter and I can't reproduce this anymore because of old code. |
Created attachment 416322 [details] Screenshot of devoots I'm seeing a bug in Safari Developer Preview where the browser does not reflow when the size of a web component changes. 1. I have a web component with <svg> in the Shadow DOM. 2. The web component has a "short" property that switched the component between a wide and narrow svg 3. When the short property changes in non-safari browsers, the browser recalculates the width of the web component 4. In Safari, the <svg> inside changes to the narrow version, but the width of the web component itself remains unchanged 5. I've added a workaround where I change the `display` when short is set: `:host([short]) { display: flex }`