Понякога картата е размазана, когато добавя моята карта (същия html, css, js) към друга страница. Различната страница може да има други html, css и js вътре в нея. Ясната картина вляво е вътре в страница с добавен CSS от трета страна. Този вдясно е без чужди html, css и js.
Как да поправя този проблем?
Едно нещо, което забелязах, когато проверявах техните детайли, е, че размерите на платното за втория пример са много по-малки.
Редактиране [Коригирано!]:
Открих проблема, като разгледах източника на 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%, картата все още е увеличена, докато не опресните страницата.