Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix visible grid around tiles #10594

Merged
merged 6 commits into from
Dec 18, 2024
Merged

Fix visible grid around tiles #10594

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b2c5192
Fix visible grid around tiles
Nekzuris Dec 11, 2024
4aac70f
Improve tiles rendering in Chrome with specific zoom value
Nekzuris Dec 11, 2024
874c1f5
Improve CSS comments
Nekzuris Dec 13, 2024
dcfcf22
Dynamic epsilon for specific pixel ratios on Chrome
Nekzuris Dec 13, 2024
28e7faa
Apply plus-lighter only at specific zoom levels
Nekzuris Dec 17, 2024
4dc8f98
Link to PR in inline comments
tyrasd Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions css/80_app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4368,6 +4368,20 @@ img.tile {
transition: opacity 120ms linear;
}

/* Workaround to remove visible grid around tile borders on Chrome
Only works with browser zoom multiple of 25 (75%, 100%, 125%...)
Should be removed when https://issues.chromium.org/issues/40084005 is resolved.
See https://github.com/openstreetmap/iD/pull/10594 */
@media (-webkit-device-pixel-ratio = 1) or (-webkit-device-pixel-ratio = 1.25) or (-webkit-device-pixel-ratio = 1.5) or (-webkit-device-pixel-ratio = 1.75)
or (-webkit-device-pixel-ratio = 2) or (-webkit-device-pixel-ratio = 2.25) or (-webkit-device-pixel-ratio = 2.5) or (-webkit-device-pixel-ratio = 2.75)
or (-webkit-device-pixel-ratio = 3) or (-webkit-device-pixel-ratio = 3.25) or (-webkit-device-pixel-ratio = 3.5) or (-webkit-device-pixel-ratio = 3.75)
or (-webkit-device-pixel-ratio = 4) or (-webkit-device-pixel-ratio = 4.25) or (-webkit-device-pixel-ratio = 4.5) or (-webkit-device-pixel-ratio = 4.75)
or (-webkit-device-pixel-ratio = 5) or (-webkit-device-pixel-ratio = 0.25) or (-webkit-device-pixel-ratio = 0.5) or (-webkit-device-pixel-ratio = 0.75) {
.layer-background img.tile {
mix-blend-mode: plus-lighter;
}
}

img.tile-removing {
opacity: 0;
z-index: 1;
Expand Down
25 changes: 22 additions & 3 deletions modules/renderer/tile_layer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,30 @@ export function rendererTileLayer(context) {
var _tileOrigin;
var _zoom;
var _source;

var _epsilon = 0;

// Workaround to remove visible grid around tile borders on Chrome with dynamic epsilon for specific browser zoom levels
// Should be removed when https://issues.chromium.org/issues/40084005 is resolved
tyrasd marked this conversation as resolved.
Show resolved Hide resolved
// See https://github.com/openstreetmap/iD/pull/10594
if (window.chrome) {
updateEpsilon();
window.addEventListener('resize', updateEpsilon);
}
function updateEpsilon() {
const pageZoom = Math.round(window.devicePixelRatio * 100);
if (pageZoom % 25 === 0) {
_epsilon = 0; // uses mix-blend-mode: plus-lighter
} else if (pageZoom === 90) {
_epsilon = 0.005;
} else if (pageZoom === 110) {
_epsilon = 0.002;
} else {
_epsilon = 0.003;
}
}

function tileSizeAtZoom(d, z) {
var EPSILON = 0.002; // close seams
return ((d.tileSize * Math.pow(2, z - d[2])) / d.tileSize) + EPSILON;
return ((d.tileSize * Math.pow(2, z - d[2])) / d.tileSize) + _epsilon;
}


Expand Down
Loading