angular: Picture tag doesn't work if inside angular app

I’m submitting a … (check one with “x”)

[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior <picture> tag can have multiple images defined. Browser chooses which one to load based on media queries and your browser’s size. An example would be:

<picture>
      <source media="(min-width: 1280px)"  srcset="https://placehold.it/400x400">
      <source media="(min-width: 1024px)"  srcset="https://placehold.it/300x300">
      <source media="(min-width: 640px)"  srcset="https://placehold.it/200x200">
      <source srcset="https://placehold.it/100x100">
      <img alt="" src="https://placehold.it/401x401">
</picture>

If <picure> tag is inside angular app, it always loads only the top image. <picture> tag outside of an angular app loads images correctly.

Warning: <picture> tag works in chrome. It doesn’t work in (at least) Firefox and Safari. Don’t know about IE and edge.

Expected behavior Should load images correctly.

Minimal reproduction of the problem with instructions https://plnkr.co/edit/qpokJtZi6U3jP864rO9X?p=preview

Try opening this link in Firefox and then resize your window. <picture> tag that is not in angular app works correctly and the one that is in app doesn’t. They are the same tags, copy-pasted.

What is the motivation / use case for changing the behavior? We’d like to load only smaller images if user has mobile browser or hasn’t opened his browser in fullscreen.

Please tell us about your environment: Vhecked on ubuntu and iOS.

Angular version: 2.4.1

Browser: [Firefox XX | IE ?? | Safari | iOS ]

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 7
Comments: 15 (6 by maintainers)

Commits related to this issue

fix(platform-browser): createElement apply attrs before attaching element to dom Closes #13947 — committed to DzmitryShylovich/angular by DzmitryShylovich 7 years ago
fix(platform-browser): createElement apply attrs before attaching element to dom Closes #13947 — committed to DzmitryShylovich/angular by DzmitryShylovich 7 years ago

Most upvoted comments

This bug is definitely a pain. Worked around it by echoing out the media width so that the element is rebound after initial render (which fixes it on FF).

ie: let mediumRes = '1024px'; in ts

<source srcset="assets/images_1024/logo.png" media="(max-width: {{mediumRes}})"> in html.

Not the cleanest workaround but it at least works.

+14

davec21 on Jun 3, 2017

I think the problem here is in order of insertion tag in DOM. Seems Firefox wants that attributes to be applied at first and then could be insert tag in the DOM

We can see it on this plunker. It’s just copy of what angular2 does internally when draws UI

https://plnkr.co/edit/rZ6kcsDH33jNxF7dtY3T?p=preview

alexzuza on Jan 16, 2017

This is working in safari now, but still not in Firefox. This is also related to https://github.com/angular/angular/issues/13699.

Keeping it open as I think we can change the order for appending vs setting attributes easily.

tbosch on Apr 25, 2017