Closed johnridesabike closed 3 years ago
Not only on iPad, but also on macOS Safari.
OS Version: macOS 11.2.3 (20D91) Safari Version: Version 14.0.3 (16610.4.3.1.7)
I see it too.
It's something jerked up with the responsive images syntax. If I put like https://res.cloudinary.com/css-tricks/image/fetch/w_1600/https://coding-fonts.css-tricks.com/screenshots/anonymous-pro/html-dark.png as the ONLY thing in srcset, it looks fine. So somehow Safari is deciding to download a far too-small version of the image.
Any ideas for fixes welcome.
Took a quick first look:
It's picking the 1200w
resource when img.clientWidth
is 840 (\@2x). It "should" pick the 1600w
for better crispness here, but I think it's just doing what the sizes
is telling it to. Lemmie workshop your sizes
for a minute...
Ticking this off also helped appearances (chunky → smooth)
Pretty sure those should be min-width
s.
Gettin' a PR together...
Left the -webkit-optimize-contrast
, as I see that it was a recent, intentional change (#59).
If you visit the site on an iPad, the image quality is much lower. It looks very low-res and pixelated. If I visit on my Mac, it looks normal. I haven’t tested on other machines.
I assume this has something to do with the way Cloudinary is serving different sizes and formats to different browsers?
I attached a screenshot. You can see how the image text looks compared to the actual text on the page.