Open Radar

 
Summary:
WebKit's srcset functionality has been touted as a solution for image resolution issues, but unfortunately, it does not work well in a fairly common (and important) case: viewport-scaled content.

Suppose you have an eBook cover, and you want to load an optimally sized image on various devices.  You almost certainly want the cover to fill the viewport, so you typically use SVG to perform a zoom-to-fit scaling of the image.

In an ideal world, for maximum backwards compatibility, your 1x size should be about the size of an original, non-retina iOS screen, give or take.

Using that model, a Retina iMac should show an 8x version of the asset, because that's the smallest power of two that is larger than the actual difference in resolution between the two screens.

Unfortunately, no matter how the content is scaled (even with simple CSS scaling), Retina Macs always show the 2x version, because instead of factoring in the fact that the content would be scaled up by a factor of 2.5x even on a non-retina iMac, it solely considers the screen's PPI, which results in a very poor user experience (fuzzy).

Steps to Reproduce:
Load this page:

    http://www.webkit.org/demos/srcset/

Tweak the page source by adding

    style="width: 4000px;height: 3000px"

to the image tag.


Expected Results:
I expected to get a higher resolution image to compensate for the additional scaling.

Actual Results:
I got the same 2x image, but bigger and fuzzier.


Version:
Safari 7.1, OS X v10.9.5


Notes:


Configuration:


Attachments: