This is a known issue for windows phone 8, but I’ve found that it is considerably bad for PNG files (JPG are OK) with dynamic/fluid widths and only occurs when I set the viewport width to device-width.

If I do not specify the viewport width to use the browser default and set the image style to max-width to 100% it all looks good and pinch zoom works well too, but this isn’t ideal as I am then cutting out the responsive behavior in other browsers.

I have successfully applied the following workaround, mind the regex will need to be updated or you need to set the compatibility mode to IE10 and not edge as WP8.1 has IE11.


It works and if the JavaScript is right before all other scripts and CSS to ensure it overrides other libraries such as bootstrap, but I have found that the layout is still not quite right when compared to when the viewport is set. I guess this might be a compromise, but has anyone found anything better?

I was also considering testing hammerjs to see if that helps, my main priority is to have crisp PNG images that can be pinch zoomed.

NOTE: with the viewport setting applied I also tried a large number of CSS styles for rendering images, but nothing worked, e.g.

image-rendering: -moz-crisp-edges;

image-rendering: -o-crisp-edges;

image-rendering: -webkit-optimize-contrast;

-ms-interpolation-mode: nearest-neighbor;

And the variations of –ms-interpolation-mode

Thanks for reading.

Browse other questions tagged or ask your own question.