OpenLayers 3: Map is blurry

Question

Sometimes the map is blurry when I add my map (same html, css, js) to a different page. The different page may have other html, css and js inside of it. The clear picture on the left is inside a page with added CSS from a third party. The one on the right is without someone else's html, css, and js.

How do I fix this issue?

One thing I noticed when inspecting their details is that the canvas dimensions for the second example is much smaller.

Edit [Fixed!]:

I found the problem looking at the ol.js source. On console, the blurry image has map.frameState_.pixelRatio = 0.89 (defaults to window.devicePixelRatio), while the clear image had map.frameState_.pixelRatio = 1. If I set pixelRatio = 1 when I initialize the map, it fixes the problem:

var map = new ol.Map({pixelRatio: 1, ...});

It turns out that if you your internet browser is zoomed in (eg, to 90%), window.devicePixelRatio will change, which causes the blurriness. However, when you zoom back to 100%, the map is still zoomed until you refresh the page.

Bolton

can you show us the map code too - it looks like your map is getting resized in the one on the right – Animated

Answer 1

This is a well known issue that has not been fixed yet.
I would suggest detecting if the browser has been zoomed and post an alert to the user like - "Hey. The map will suck if you don't have browser zoomed at 100%".
And a little offtopic - if you change the container size and the map if blury, just call map.updateSize() to fix it.

Apex