Twenty Seventeen Image Size Safari
-
Hi,
I have a completely clean install of WP 4.7.2, and a completely clean install of Twenty Seventeen.
On testing Twenty Seventeen, I notice that the size of the featured image on the home page is very different for different browsers. I’m using a Mac. Chrome and Firefox appear to render the image correctly (and responsively). However, Safari over-zooms and heavily crops the image.
I’ve tested this on a number of instances of Safari on a number of different machines, and with a number of different images (including the built-in demo image) – all with the same result.
I don’t feel I can use the theme until I find a solution – because it makes the main image useless for those using Safari. I’ve searched the web using a variety of keywords, but I cannot find any reference.
Before I go digging into the css and try to fix the problem myself, is this something that has been seen before?
Thanks!
-
So, it seems that the problem is that the Twenty Seventeen theme doesn’t fail gracefully when the browser doesn’t support srcset.
srcset is a way of allowing the browser to request one of a variety of available images, according to the local environment – so it’s great for responsive designs (which is what Twenty Seventeen is).
Where scrset is not supported, the browser fails back to src= – and that’s where things go wrong here. The default image is forced to render at the full 2000×1200 pixels – hence the apparent overzoom and cropping.
I suggest that the correct behaviour should be to render the default image at 100% width (or 100vh), and auto (correct aspect ratio) height – centered vertically in the containing div, with hidden overflow.
srcset is not supported by Safari on the desktop until version 9, and that was released at the end of 2015. I updated to Safari version 10, and didn’t then observe the problem.
I’ve looked at trying to correct the problem, and have tried a number of things like changing the attributes written into the html, and changing the css targeting of that element. However, I can’t find the right solution – I expect because there’s some other parent css that’s breaking my attempts.
I appreciate that Safari has supported srcset for about 18 months – but there’re a number of good reasons why folks might not yet have updated. Plus, I can see that there’re plenty of other browsers where it’s not supported.
Is it reasonable to not fail gracefully for clients that don’t support srcset? In my opinion, I’d say not – so I think that this is something that would be great to get fixed.
Simon
- The topic ‘Twenty Seventeen Image Size Safari’ is closed to new replies.
