picture <source> element doesn't dynamically react to media changes if in a ShadowRoot
Categories
(Core :: DOM: Core & HTML, defect)
Tracking
()
Tracking | Status | |
---|---|---|
firefox-esr60 | --- | unaffected |
firefox64 | --- | wontfix |
firefox65 | --- | verified |
firefox66 | --- | verified |
People
(Reporter: glob, Assigned: emilio)
References
(Blocks 1 open bug)
Details
(Keywords: regression)
Attachments
(1 file)
(deleted),
text/x-phabricator-request
|
RyanVM
:
approval-mozilla-beta+
|
Details |
https://interactive-examples.mdn.mozilla.net/pages/tabbed/picture.html no longer works in firefox.
<picture>
<source srcset="/media/examples/surfer-240-200.jpg"
media="(min-width: 800px)">
<img src="/media/examples/painted-hand-298-332.jpg" />
</picture>
mozregression says:
10:15.33 INFO: Last good revision: 48a5d87cf9bdb59e39653ab331df04ea2a04267d
10:15.33 INFO: First bad revision: 20d536fd0f2a02bd4527044d367cf98bebbb358d
10:15.33 INFO: Pushlog: https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=48a5d87cf9bdb59e39653ab331df04ea2a04267d&tochange=20d536fd0f2a02bd4527044d367cf98bebbb358d
which is bug 1460069.
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0
Steps to reproduce:
Open a page containing a picture-tag using srcset, like the example from developer.mozilla.org: https://interactive-examples.mdn.mozilla.net/pages/tabbed/picture.html
It also happens in my Angular project which dynamically loads the page content.
It does not happen on static websites without JavaScript like this: http://jsfiddle.net/6od2qm5a/
Actual results:
The picture meant to be for a browsers wider than 800px is always displayed.
Expected results:
The image should switch when the browser is smaller than 800px.
Assignee | ||
Comment 3•6 years ago
|
||
That example uses shadow dom if available. I'll take a look.
Assignee | ||
Updated•6 years ago
|
Assignee | ||
Updated•6 years ago
|
Assignee | ||
Updated•6 years ago
|
Assignee | ||
Comment 4•6 years ago
|
||
Comment 7•6 years ago
|
||
(In reply to Emilio Cobos Álvarez (:emilio) from comment #4)
Created attachment 9035333 [details]
Bug 1518795 - Properly track responsive content in a connected ShadowRoot.
r=edgar,smaugTook more to write the test than the fix :)
Isn't that almost always the case.
Comment 8•6 years ago
|
||
bugherder |
Assignee | ||
Comment 9•6 years ago
|
||
Comment on attachment 9035333 [details]
Bug 1518795 - Properly track responsive content in a connected ShadowRoot. r=edgar,smaug
[Beta/Release Uplift Approval Request]
Feature/Bug causing the regression: shadow DOM
User impact if declined: responsive images misbehave.
Is this code covered by automated tests?: Yes
Has the fix been verified in Nightly?: No
Needs manual test from QE?: Yes
If yes, steps to reproduce: See STR in comment 0.
List of other uplifts needed: none
Risk to taking this patch: Low
Why is the change risky/not risky? (and alternatives if risky): Simple fix to check the right document. Should be pretty straight-forward and not affect at all non-shadow-DOM content.
String changes made/needed: none
Updated•6 years ago
|
Comment 10•6 years ago
|
||
Comment on attachment 9035333 [details]
Bug 1518795 - Properly track responsive content in a connected ShadowRoot. r=edgar,smaug
[Triage Comment]
Fixes a bug with responsive image misbehavior in Shadow DOM. Approved for 65.0b10.
Comment 11•6 years ago
|
||
bugherder uplift |
Comment 12•6 years ago
|
||
This issue is verified fixed using Firefox 65.0b10 (BuildId:20190110221328) and Firefox 66.0a1 (BuildId:20190110214210) on Windows 10 64bit, macOS 10.13.6 and Ubuntu 16.04 64bit.
Updated•6 years ago
|
Description
•