Closed Frodigo closed 3 years ago
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
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
PWA-801 is tracking this internally.
@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
Describe the bug Homepage Images are not displayed in the Safari browser. Errors apears in console
To reproduce Steps to reproduce the behavior:
Expected behavior Images are displayed in the Safari browser
Screenshots![Screenshot 2020-09-15 at 09 06 28](https://user-images.githubusercontent.com/11998249/93177284-e162de80-f732-11ea-9bb1-8596d26d0ca8.png)
Please complete the following device information:
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