[bug]: Homepage Images are not displayed in the Safari browser

[Frodigo]

Describe the bug Homepage Images are not displayed in the Safari browser. Errors apears in console

To reproduce Steps to reproduce the behavior:

1. Open the Safari Browser
2. Go to Venia Homepage: https://develop.pwa-venia.com
3. See that images are not displaying

Expected behavior Images are displayed in the Safari browser

Screenshots

Please complete the following device information:

• OS: macOS Catalina 10.15.5
• Browser Safari
• Browser Version 13.1.1
• PWA Studio Version: current develop

Please let us know what packages this bug is in regards to:

• [x] venia-concept

• [ ] venia-ui

• [ ] pwa-buildpack

• [ ] peregrine

• [ ] pwa-devdocs

• [ ] upward-js

• [ ] upward-spec

• [ ] create-pwa

[m2-assistant[bot]]

Hi @Frodigo. Thank you for your report. To help us process this issue please make sure that you provided sufficient information.

Please, add a comment to assign the issue: @magento I am working on this

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[huykon]

the param auto=webp or quality=85 of background-image is not working on safari. Remove one in 2 that params, it will working on

[sirugh]

PWA-801 is tracking this internally.

[mercs600]

@Frodigo I was reporting this issue some time ago https://github.com/magento/pwa-studio/issues/2551

Main issue is related with caching - when you open PWAStudio on chrome - where webp are suported - then the image service will cache webp images - so when you try to open this page again on safari - you will get cached webp images.

To workaround, we have to keep pwa-buildpack locally and make changes there:

packages/pwa-buildpack/lib/Utilities/addImgOptMiddleware.js

function IsWebpSupported(req) {
    return typeof req.headers !== 'undefined' && typeof req.headers['accept'] !== 'undefined' && req.headers['accept'].includes('image/webp')
}

make changes in function addImgOptMiddleware(app, config)

    try {
        cacheMiddleware = cache(cacheExpires, (req, res) => hastily.hasSupportedExtension(req) && res.statusCode === 200, {
            debug: cacheDebug,
            appendKey: (req) => IsWebpSupported(req) ? 'supported' : 'regular',
            statusCodes: {
                exclude: [404],
                include: [200]
            },
        });
    } catch (e) {

thanks to that modification you can cache two version of images - webp suported/unsuported