Leaflet: Das neueste Chrome hat 1px-Kachelränder für ganzzahlige Zooms eingeführt

Erstellt eine CodeSandbox und ein GIF für die Bildschirmaufnahme:

Dies kommt auch bei Nicht-Retina-Auflösungen vor.

😭

Kann nur bestätigen, dass ich dies unter Windows mit Chrome 65.0.3325.181 reproduzieren kann.

Ich erinnere mich an das Setzen von L_DISABLE_3D das alte Problem mit den Kachelrändern zu beheben, aber dies scheint in dem oben verlinkten Beispiel keinen Unterschied zu machen.

Ich kann auf Chromium 65.0.3325.146 unter Linux reproduzieren.

Auf den ersten Blick scheint dies auf nicht ganzzahlige Offsets beim Trägheitsschwenken zurückzuführen zu sein.

Bei einem weiteren Update sehe ich immer noch eine Menge von translate3d wenn ich die Karte im DOM inspiziere, selbst nachdem ich window.L_DISABLE_3D = true , also ist dort vielleicht noch etwas anderes los.

Wie auch immer, ich würde sagen, wir sollten dies dem Chrome-Team als Problem melden. IIRC, sie waren zumindest irgendwie hilfreich, als wir das letzte Mal gemacht haben, obwohl es das Problem am Ende nicht behoben hat.

https://github.com/Leaflet/Leaflet/blob/8a009fa662fd42efc3d720ab60d878c245f6e681/src/map/handler/Map.Drag.js#L212

Warten Sie, der Trägheitsversatz ist bereits aufgerundet. WTF?! :verwirrt:

Wenn der Trägheitsversatz aufgerundet ist, warum werden die translate3d -Transformationen gebrochen?! :verwirrt:

@IvanSanchez komisch, aber zumindest sieht das so aus, als ob _we_ daran arbeiten kann!

Die aufgerundeten Anrufe werden nur einmal aufgerufen. Ich habe das Problem zurückverfolgt

https://github.com/Leaflet/Leaflet/blob/8a009fa662fd42efc3d720ab60d878c245f6e681/src/dom/PosAnimation.js#L77

Die Lösung wäre, irgendwie eine Option an PosAnimation zu übergeben, um die Koordinaten auf jedem Animationsframe zu runden.

Rundungen sind nicht unbedingt eine ideale Lösung, da Sie auf einem Retina-Display tatsächlich doppelt so viele physische Pixel haben wie vom Browser gemeldet, sodass translate(0.5px) tatsächlich eine visuelle und nützliche Konsequenz für die Retina hat.

Ich konnte einen minimalen Reproducer erstellen, ohne Leaflet.js zu verwenden. Es sieht also so aus, als wäre es tatsächlich ein Fehler in Blink.

Ich habe ein Problem mit dem Chromium-Tracker geöffnet, damit wir es hoffentlich dort beheben können:

https://bugs.chromium.org/p/chromium/issues/detail?id=825711&can=2&q=subpixel%20image&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified

Wenn Sie möchten, dass dieser Fehler behoben wird, möchten sie, dass die Leute Probleme ansprechen, um dies widerzuspiegeln.

Außerdem denke ich, dass dieses Problem tatsächlich über das Zoomen hinausgeht. Ich denke, es geht um jede Subpixel-Übersetzung.

Ich kann das konsequent reproduzieren:

1) Öffnen Sie diese Demo: https://esri.github.io/esri-leaflet/examples/switching-basemaps.html
2) Schalten Sie die Grundkarte auf "Bilder", um den Kontrast zu erhöhen
3) Schwenken Sie die Karte nach Osten. Wenn Sie so fertig sind, dass die Pfanne keine ganze Zahl ist, sehen Sie graue Linien zwischen den Grundkarten.

Zur Berücksichtigung der Ränder, obwohl ich sie beim Schwenken in Firefox 59.0.1 (U / min) nicht sehe, werden sie während der Animation bei jedem Zoomvorgang angezeigt.

@Widdershin Hallo, für die Netzhaut werden die physischen Pixel zu CSS-Pixeln berechnet und als solche behandelt. Warum sollten Sie also die tatsächlichen physischen Pixel für das Layout berücksichtigen? Ich denke das ist irrelevant. Wenn translate(0.5px) einen visuellen Effekt für Sie haben, liegt es nicht daran, dass es von der Layout-Engine gerundet wurde, um als 1 CSS-Pixel angezeigt zu werden? https://www.w3.org/TR/css3-values/#absolute -lengths

@Widdershin Zoom ist hier nur wichtig, weil es für fraktionierte

Hallo allerseits, ich habe auch den Chrome-Fehler kommentiert ( @Widdershin, danke für die Meldung). Das Chromium-Team scheint an einer Lösung interessiert zu sein und fragt, welche Version ihn eingeführt hat. Können Sie dabei helfen? Ich kann keine alten Versionen von Chrome unter macOS installieren, und in einer virtuellen Parallels-Maschine ist das Problem nicht vorhanden.

Wenn Sie ein anderes Betriebssystem verwenden, können Sie möglicherweise tragbares Chrome oder ähnliches ausprobieren, um herauszufinden, welche Version es eingeführt hat. Können Sie helfen, dies herauszufinden?

@ Hyperknot
Hallo, tut mir leid, ich kenne die erste Version nicht. Ich habe Chromium 61.0.3163.100-1.fc27 heruntergestuft und überprüft. Die Ränder werden auch dort angezeigt. Wenn ich schnell schwenke und die Maustaste loslasse, werden sie angezeigt, bis die Animation beendet ist.

Zur Berücksichtigung der Ränder, obwohl ich sie beim Schwenken in Firefox 59.0.1 (U / min) nicht sehe, werden sie während der Animation bei jedem Zoomvorgang angezeigt.

Klingt so, als ob sich der Zoom-Fehler tatsächlich von dem Pan-Fehler unterscheidet, den ich dem Chrom-Team gemeldet habe. Tut mir leid, dass ich dieses Problem übernommen habe!

Zugehöriges / mögliches Duplikat von # 3575.

Siehe auch das Chromium-Problem, das als Ergebnis dieses Problems aufgetreten ist.

https://bugs.chromium.org/p/chromium/issues/detail?id=600120

Mhh, sie haben die Priorität im Juli erhöht ... hoffen wir.

Leider ist die Priorität umso höher, je niedriger die Zahl ist.

https://bugs.chromium.org/p/chromium/fields/detail?field=Pri

Was am frustrierendsten ist: Sie sehen diese Gitterlinien in Chrome sogar zusammen mit Google Maps, und niemand scheint davon betroffen zu sein. Verwenden Sie einfach eine Skalierung> 100% für den Windows-Desktop oder den Browser und öffnen Sie sie

https://www.google.de/maps/@54.3061614 , 2.0559393,5z

Vielleicht sind wir einfach zu pedantisch, aber ein dunkles Thema macht Leaflet mit Chrome fast unbrauchbar. Wechseln Sie hier zur Basiskarte 'blackmarble'

https://ptv-logistics.github.io/xserverjs/boilerplate/Leaflet.1.0.html

Dieses Problem tritt übrigens bei LL0.7 nicht auf

https://ptv-logistics.github.io/xserverjs/boilerplate/Leaflet.0.7.html

Nach Jahren des Leidens unter diesem Problem sehe ich die einzigen Optionen:

1. Machen Sie den Kartenhintergrund für dunkle Basiskarten schwarz / dunkel

.leaflet-container {
    background: #000;
}  

1. Verwenden Sie FireFox oder Edge
2. Verwenden Sie die Packungsbeilage 0.7

Ich kann bestätigen, dass das Beispiel von @oliverheilig richtig ist. Die 1px-Zeilen erscheinen nur in der Version 1.0, nicht in Version 0.7. Es scheint also einen Weg zu geben, diese Seite zu lösen. Wenn jemand die Energie hat, herauszufinden, warum Chrome die 1px-Zeilen in 1.0 und nicht in 0.7 einführt, kann dies möglicherweise eine Korrektur ermöglichen.

Das neueste Update für dieses Chrome-Problem bestätigt, dass nicht beabsichtigt ist, das Problem bald zu beheben.

Wenn jemand dies beheben möchte, würde ich empfehlen, ein git bisect manuell auszuführen, um das Problem zu finden.

Ich habe den Code von 0.7 und 1.x verglichen. Für mich sieht es so aus, als ob 1.x verschachtelte CSS-Transformationen verwendet, die Chrome nicht richtig verarbeitet. Ich denke, dies wurde mit dem Bruchzoom in LL eingeführt. Ich befürchte, dies kann nur durch ein vollständiges Umschreiben der Fliesenstiche mit Leinwand behoben werden, wie dies bei OL der Fall ist:

https://ptv-logistics.github.io/xserverjs/boilerplate/OpenLayers3.html

Es gibt bereits ein Plugin für das Zusammenfügen von Kacheln auf Leinwand: https://github.com/Leaflet/Leaflet.TileLayer.NoGap (möglicherweise aktualisiert oder nicht, um mit der neuesten Broschüre zu funktionieren, aber es hat irgendwann funktioniert).

Jetzt haben wir diese "Erfahrung" auch auf Firefox (62.0.2) super! Derzeit sind die einzigen fehlerfreien Browser IE und Edge!

Gross, wurden hier Fortschritte erzielt, und / oder gibt es eine Problemumgehung, die der akzeptierte Ansatz ist, den die Menschen verwenden?

Sieht so aus, als müssten wir alle damit leben. Und auch der neue chrombasierte Edge wird dieses Problem erben.

Von cmulders "hack" ist hier eine gute Problemumgehung, um die Kacheln 1 Pixel größer zu machen, mit dem Nebeneffekt, dass sie sich um 1 px überlappen. Außerdem werden die Kacheln leicht vergrößert und skaliert (um 1 Pixel).

/* 
 * Workaround for 1px lines appearing in some browsers due to fractional transforms
 * and resulting anti-aliasing.
 * https://github.com/Leaflet/Leaflet/issues/3575
 */
(function(){
    var originalInitTile = L.GridLayer.prototype._initTile
    L.GridLayer.include({
        _initTile: function (tile) {
            originalInitTile.call(this, tile);

            var tileSize = this.getTileSize();

            tile.style.width = tileSize.x + 1 + 'px';
            tile.style.height = tileSize.y + 1 + 'px';
        }
    });
})()

Ich möchte nur sagen, dass die obige Funktion von Oijkn funktioniert. Ich habe es gerade kopiert und in meinen Code eingefügt und die weißen Gitterlinien sind verschwunden. Danke Oijkn!

Das Update funktioniert auch bei mir. Danke @oijkn! Ich möchte jedoch über dieses Problem auf dem Laufenden bleiben, falls es in einer zukünftigen Version von Leaflet behoben wird, damit ich diesen Hack loswerden kann.

Ich kann dieses Problem unter Debian Linux, XFCE, nach dem Upgrade auf den HDPI-Monitor (4k 32 ") reproduzieren. Reproduzierbar in Chrome, nicht in FF. Seite nicht skaliert.

Beispiel: https://www.freemap.sk/?map=15/48.687986/20.446608 & layer = Z.

Linien sind beim Verschieben der Karte stabil und haben beim Skalieren der Seite ihre Breite geändert.