CODEWITHSUNDEEP
htmlreactjsimagepicturefill
Suresh Ungarala
Suresh Ungarala

Reputation: 51

<picture /> element is not working as expected in Safari browser, while using React

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.

Upvotes: 5

Views: 2202

Answers (2)

Glenn
Glenn

Reputation: 11

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)

Upvotes: 0

Lovor
Lovor

Reputation: 253

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

Upvotes: -1

Related Questions