Safari: `<picture>` in asynchronously loaded pages get fallback image

Turbo version: 7.0.0-rc.1.

This is a weird problem only faced in Safari (tested in 14.1.2).

I moved to Turbo from Swup. In my website, I use <picture> tag to load responsive images (showing sample code below).

In Safari, when the page is navigated to, through Turbo the fallback image (file specified in the <img>) is loaded.

In other browsers, the correct image matching the width and pixel density is loaded.

Example:

<picture
  ><source
    type="image/webp"
    srcset="
      /images/anh-tuan-to-F2FIM5HJogk-unsplash-110cbaf3-100w.webp   100w,
      /images/anh-tuan-to-F2FIM5HJogk-unsplash-110cbaf3-300w.webp   300w,
      /images/anh-tuan-to-F2FIM5HJogk-unsplash-110cbaf3-500w.webp   500w,
      /images/anh-tuan-to-F2FIM5HJogk-unsplash-110cbaf3-700w.webp   700w,
      /images/anh-tuan-to-F2FIM5HJogk-unsplash-110cbaf3-900w.webp   900w,
      /images/anh-tuan-to-F2FIM5HJogk-unsplash-110cbaf3-1100w.webp 1100w,
      /images/anh-tuan-to-F2FIM5HJogk-unsplash-110cbaf3-1300w.webp 1300w
    "
    sizes="100vw" />
  <source
    type="image/jpeg"
    srcset="
      /images/anh-tuan-to-F2FIM5HJogk-unsplash-110cbaf3-100w.jpeg   100w,
      /images/anh-tuan-to-F2FIM5HJogk-unsplash-110cbaf3-300w.jpeg   300w,
      /images/anh-tuan-to-F2FIM5HJogk-unsplash-110cbaf3-500w.jpeg   500w,
      /images/anh-tuan-to-F2FIM5HJogk-unsplash-110cbaf3-700w.jpeg   700w,
      /images/anh-tuan-to-F2FIM5HJogk-unsplash-110cbaf3-900w.jpeg   900w,
      /images/anh-tuan-to-F2FIM5HJogk-unsplash-110cbaf3-1100w.jpeg 1100w,
      /images/anh-tuan-to-F2FIM5HJogk-unsplash-110cbaf3-1300w.jpeg 1300w
    "
    sizes="100vw" />
  <img
    src="/images/anh-tuan-to-F2FIM5HJogk-unsplash-110cbaf3-100w.jpeg"
    width="1300"
    height="866"
    alt="Photo by Anh Tuan To on Unsplash"
    sizes="100vw"
    loading="lazy"
    decoding="async"
/></picture>

To demonstrate the problem, you can visit https://sleepy-hawking-71d88c.netlify.app in Safari and click through the links. When navigated through links, you’ll see a blurred image (with filename ending with -100w.jpeg). If you refresh the page, the correct image is loaded.

You can also find the code the sample page in this repo.

This problem is not there in the latest versions of Turbolinks, Barba.js, or Swup.

[boboldehampsink]

Same here. For now I am using this (ugly) snippet to work around the Safari problem:

// Image fix for Safari
document.addEventListener('turbo:render', () => {
  if (navigator.userAgent.match(/Version\/[\d.]+.*Safari/)) {
    document.querySelectorAll('picture').forEach((img) => {
      img.outerHTML = img.outerHTML; // eslint-disable-line no-param-reassign, no-self-assign
    });
  }
});

[rik]

I believe this is related to Turbo’s use of new DOMParser().parseFromString(). Other frameworks probably don’t use this and don’t run into this issue.

I’ve opened https://bugs.webkit.org/show_bug.cgi?id=244815 on Safari’s side.