OpenLayers 3: Карта размыта

Question

Иногда карта размыта, когда я добавляю свою карту (тот же html, css, js) на другую страницу. На другой странице могут быть другие html, css и js внутри нее. Четкое изображение слева находится внутри страницы с добавленным CSS от третьего лица. Тот, который справа, не имеет других html, css и js.

Как исправить эту проблему?

Одна вещь, которую я заметил при осмотре их детали является то, что размеры холста для второго примера гораздо меньше.

Edit [Исправлено]:

Я нашел проблему, глядя на источник ol.js. На консоли размытое изображение имеет map.frameState_.pixelRatio = 0.89 (по умолчанию - window.devicePixelRatio), тогда как четкое изображение имеет map.frameState_.pixelRatio = 1. Если я устанавливаю pixelRatio = 1 при инициализации карты, он фиксирует проблема:

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

оказывается, что если ваш интернет-браузер увеличено (например, до 90%), window.devicePixelRatio будет меняться, что вызывает размытость. Однако, когда вы увеличиваете масштаб изображения до 100%, карта по-прежнему увеличивается до обновления страницы.

Answer 1

Это well known issue, который еще не исправлен.
Я бы предложил detecting, если браузер был увеличен и выставить предупреждение пользователю - «Привет». Карта будет сосать, если у вас нет браузера, увеличенного на 100% ».
И немного offtopic - если вы измените размер контейнера и карту, если он похож, просто позвоните map.updateSize(), чтобы исправить это.