picture <source> element doesn't dynamically react to media changes if in a ShadowRoot

VERIFIED FIXED in Firefox 65

Status

()

defect
VERIFIED FIXED
6 months ago
4 months ago

People

(Reporter: glob, Assigned: emilio)

Tracking

(Blocks 1 bug, {regression})

Trunk
mozilla66
Points:
---
Dependency tree / graph
Bug Flags:
in-testsuite +

Firefox Tracking Flags

(firefox-esr60 unaffected, firefox64 wontfix, firefox65 verified, firefox66 verified)

Details

Attachments

(1 attachment)

Reporter

Description

6 months ago

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.

Updated

6 months ago
Duplicate of this bug: 1518794

Comment 2

6 months ago

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 months ago

That example uses shadow dom if available. I'll take a look.

Assignee

Updated

6 months ago
Blocks: shadowdom
Summary: picture <source> element no longer honours media selector → picture <source> element doesn't honour media selector if in a ShadowRoot
Assignee

Updated

6 months ago
Assignee: nobody → emilio
Assignee

Updated

6 months ago
Summary: picture <source> element doesn't honour media selector if in a ShadowRoot → picture <source> element doesn't dynamically react to media changes if in a ShadowRoot

Comment 5

6 months ago
Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/f0442a84c0d9
Properly track responsive content in a connected ShadowRoot. r=smaug
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/14780 for changes under testing/web-platform/tests

(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,smaug

Took more to write the test than the fix :)

Isn't that almost always the case.

Comment 8

6 months ago
bugherder
Status: NEW → RESOLVED
Closed: 6 months ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla66
Assignee

Comment 9

6 months 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

Attachment #9035333 - Flags: approval-mozilla-beta?
Flags: qe-verify+
Flags: in-testsuite+

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.

Attachment #9035333 - Flags: approval-mozilla-beta? → approval-mozilla-beta+

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.

Status: RESOLVED → VERIFIED
Flags: qe-verify+
Component: DOM → DOM: Core & HTML
You need to log in before you can comment on or make changes to this bug.