1492071 - [shadow dom] image in shadow root not reloading when src altered by javascript

Status: RESOLVED INVALID

(Core :: DOM: Core & HTML, defect)

Description

[Benny Powers]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:62.0) Gecko/20100101 Firefox/62.0
Build ID: 20180830143136

Steps to reproduce:

demo: https://road-physician.glitch.me 
code: https://glitch.com/edit/#!/road-physician?path=index.html:21:86

<lazy-image> uses IntersectionObserver to change the src attribute of an image element in its shadow root whenever the element is on screen.


Actual results:

The image attribute changes successfully when the element intersects, however, the loaded image does not appear on screen (i.e. the placeholder remains in place visually)

This behaviour only occurs in developer edition version 63.0b6. Firefox 62 with web components flags enabled does not appear to have this problem.


Expected results:

when the image src attr changed, the image should have reloaded visually.

Comment 1

[Gyula Palko[:gpalko]]

Hi,
 I can reproduce this on the latest Nightly 64 and Beta 63 builds. Setting the component in order to involve the development team in reviewing this issue. 

Thanks!

Comment 2

[Olli Pettay [:smaug][[e-mail]]]

Minimal testcase would be really nice.

Comment 3

[Olli Pettay [:smaug][[e-mail]]]

I don't know what is supposed to happen with the testcase. Clicking launch shows some image on FF, another one on Chrome.
On Chrome there is some weird flashing happening when loading the page.

Comment 4

[Olli Pettay [:smaug][[e-mail]]]

Hmm, I see the img element in shadow DOM has the right src, but background-image is being shown.

Comment 5

[Olli Pettay [:smaug][[e-mail]]]

Oh, <img> has opacity 0.

Comment 6

[Olli Pettay [:smaug][[e-mail]]]

There are rules
    :host([fade]) img {
      opacity: 0;
    }

    img[intersecting] {
      opacity: 1;
    }
  
and host element does have fade attribute.

Comment 7

[Olli Pettay [:smaug][[e-mail]]]

And img has intersecting

Comment 8

[Gyula Palko[:gpalko]]

On demo page from description: Clicking the Launch button on Firefox 62 shows the image with a cat. Doing the same on Firefox 64 and 63, only the image placeholder is displayed.
Chrome is showing the placeholder before the cat image is loaded, I guess that's the weird flashing you noticed.

Comment 9

[Benny Powers]

The idea is to show the placeholder until the image is loaded, then fade to the image.

If the css that handles the fade doesn't work the way I just described, that's my problem and not related to this issue. The issue here is that the image src attribute changes to the custom element's src attr, but the image displayed is the placeholder, not the new image.

Comment 10

[Olli Pettay [:smaug][[e-mail]]]

And yes, 62 with dom.webcomponents.customelements.enabled=true and dom.webcomponents.shadowdom.enabled=true doesn't show the issue. <img> inside shadow DOM has opacity=1

Comment 11

[Emilio Cobos Álvarez (:emilio)]

looking.

Comment 12

[Emilio Cobos Álvarez (:emilio)]

I think this is invalid. Bug 1454165 is what probably regressed this. But `:host([fade]) img` has greater specificity than `img[intersects]`. 

Blink accounts for specificity in ::slotted but not :host. The CSSWG resolved that they should in https://github.com/w3c/csswg-drafts/issues/1915.

Closing as invalid for now. Though if more people are affected by this I guess we should revert bug 1454165.

The change was proposed by Blink engineers as well so I hope they change Chrome to follow the spec: https://github.com/w3c/csswg-drafts/issues/1915#issuecomment-351658329.

Comment 13

[Emilio Cobos Álvarez (:emilio)]

Filed https://bugs.chromium.org/p/chromium/issues/detail?id=887976.

Comment 14

[Emilio Cobos Álvarez (:emilio)]

This indeed also fails on WebKit.

Comment 15

[Emilio Cobos Álvarez (:emilio)]

(Though I guess WebKit doesn't support IntersectionObserver).