5

I am facing an issue with "picture" element in React, particularly with safari browser. Safari is always fetching image from "img" element src along with the image from appropriate "source" element based on media attribute.

This seem to work fine in other browsers(chrome & firefox).

I created a codesandbox for the same.

Would appreciate any help. Thanks in advance.

FYI: I tried with picturefill polyfill too. But no help. So, thought it is something to do with react + safari engine combo.

Suresh Ungarala
  • 51
  • 1
  • 5
  • it works on safari for me. – Ahmad Jan 20 '20 at 12:34
  • 1
    Hi Ahmad, is safari fetching only appropriate src and not src from "img" tag too? I am using Safari Version 13.0.4 (15608.4.9.1.3). It is fetching both correct "source"element src and the "img" element src. – Suresh Ungarala Jan 21 '20 at 08:46
  • Did you solve this Suresh? I'm also facing the same problem – Geraint Mar 24 '20 at 15:17
  • 1
    In my case the issue occurs when picture elements are generated dynamically using React or Vue, there is no issue if the html is static. – xuxu Mar 24 '22 at 05:13
  • For more information see https://github.com/vuejs/vue/issues/11357 – xuxu Mar 24 '22 at 05:25

2 Answers2

0

For what is it worth, I have narrowed my issue with this on Safari: Seems to work with a vanilla element but when I have an HTML custom element and create the picture tag within the InnerHTML of a template (document.createElement("template").

I am using Vanilla JS not React but perhaps it is doing something similar under the covers.

I tried with and without specifying a "type" attribute on the but no effect.

Works fine on Chrome. Safari version is Version 14.0.3 (16610.4.3.1.7)

Glenn
  • 11
  • 1
    Perhaps doesn't sit well in an answer. try to make sure when posting an answer, you are doing so with confidence that it solves the issue. Also using the comment section under the question makes more sense for suggestions and additions – web_walkerX Jun 29 '21 at 23:49
  • Thanks a lot. I have also encountered this strange bug on Safari. I was doing `document.createElement("template")` and the `picture` tag was not working. – Mikołaj Waśniewski Jan 12 '22 at 19:45
-1

Perhaps you forgot type attribute of source element. It was the problem in my case.

Lovor
  • 236
  • 2
  • 9