Leaflet: Webkitブラウザーの分数ズームレベルのタイル間のスペース

わからない。 :(問題はSafariでしか見られませんでしたが、— Chrome / Operaは正常に機能しました。

誰かがこれをどのように修正できるか考えていますか？

私にはアイデアがありますが、それは「ラジカル」と「実験的」という言葉にリンクされています。

https://github.com/IvanSanchez/Leaflet.gl

私が発見したことの1つは、テクスチャをクランプする必要があるということです。 つまり、この行が削除された場合： https ：

今のところ、タイルレイヤーの三角形はスライバーなしでレンダリングされる完全なメッシュを形成しています...しかし、「実験的」という言葉は当分の間そのすべてになります。

@mourner Safariでより強力な効果がありますが、Chromeでも表示されます。

@IvanSanchezすばらしい仕事ですが、（まだ）それを使用できるとは思いません。

@Eschonええ、Retina画面ではさらに目立たないので、おそらく気づかなかったでしょう。

これはFirefoxにも影響を与える場合があります。
jsFiddleでは再現できませんでしたが、そのサイトを見ると
Firefox39と41.0a2で同じスペースを取得します

編集：これはiframeの問題のようです。 地図を直接開くと再現

多くのハッキングなしでこれが1.0で可能になるとは思えません。 バックログの一番下にプッシュします。

最新のChromeでも同じ問題が発生します。 OpenStreetマップはこれらの線でうまく表示されないので、可能な修正を見つけてください。 ありがとう。

特に暗い地図や画像（私の場合）では、この問題は非常に顕著です。 Ivanが述べたように、ブラウザでのアンチエイリアスにより、ズーム中の_fractional_変換が原因でタイル間にスペースが生じると思います。

より良い解決策が利用可能になるまで、この回避策（またはハック）を使用してタイルを1ピクセル大きくし、副作用として1ピクセル重なるようにします。 それに加えて、タイルはわずかに拡大および拡大縮小されます（1px）。

/* 
 * 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';
        }
    });
})()

@cmulders回避策をありがとう！
私たちは主に白と青のスキーリゾートの地図を持っているので。 今のところスペースは無視しました。回避策を使用すると、見た目がはるかに良くなります。

cartodbの暗いタイルでjsbinを作成すると、網膜画面でも線が表示されます。
http://jsbin.com/ratoli/5/edit?html、js、output

Safari / Chromeのバギー、FFOKです。

これについては、リーフレットなしのChromeバグレポートを作成する必要があるため、将来のChromeバージョンで修正されます。

@hyperknot Chromeのバグレポートはすでにあると思いますが、今は見つかりません。

私はleafletjs1.0ベータ版を使用していますが、osx El Capitanの（最新：chrome、safari、firefox）でもこのバグが発生することがあります。 画像の transform cssプロパティを1px編集すると、編集されたタイルはその隣のタイルと整列します。

// ex.
 transform: translate3d(1556px, -81px, 0px);
 // to
 transform: translate3d(1555px, -80px, 0px);

ただし、このバグが表示されない場合もあります（1pxの違い）!! 理由はわかりません:(しかし、現在、マップコンテナのスタイルに関係していると思います。

編集：タイルがレンダリング時に正しく整列し、1pxの違いが表示されないとすると、マップ移動イベントでギャップが表示されます。 動作は、タイルの周りの1pxの境界線のフラッシュのようなものです。

OS X ElCapitanのSafari9.1で、問題を解決するcssの回避策を見つけました。

.leaflet-tile-container img {
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.05);
}

私はあまり信用できませんが、これが役立つ_理由_を示唆する次のStackoverflowの回答からそれを取りました： http ：//stackoverflow.com/a/17822836/138103

ボックスシャドウを使用すると、問題がより直接的に解決されます。ボックスの再描画寸法が拡張され、WebKitに余分なピクセルの再描画が強制されます。 モバイルブラウザでのボックスシャドウの既知のパフォーマンスへの影響は、使用されるブラー半径に直接関係しているため、1ピクセルのシャドウはほとんどまたはまったく効果がないはずです。

おそらくこれは適切な修正として使用できますが、他の人が最初にこれを試した方がよいでしょう。 しかし、それは私にとってはうまくいき、他のブラウザでは問題を引き起こさないようです。

@hrefたぶん、その修正でプルリクエストを行うことができますか？ これにより、テストが簡単になります。

@href @IvanSanchezこれがレンダリングパフォーマンスに影響しないと確信していますか？ アルファ不透明度のボックスシャドウを追加すると、モバイルデバイスにどのように影響するかをプロファイルする必要があると思います。たとえば、パフォーマンスに目に見える影響を与えたり、ハードウェアアクセラレーションを無効にしたりする可能性があります。

@IvanSanchezが完了しました。

これがレンダリングパフォーマンスに影響を与えないことを確認しますか？ たとえば、アルファ不透明度のボックスシャドウを追加すると、モバイルデバイスにどのように影響するかをプロファイルする必要があると思います。たとえば、パフォーマンスに目に見える影響を与えたり、パンのハードウェアアクセラレーションを無効にしたりする可能性があります。

これがどのような影響を与えるのか、まったくわかりません。 Stackoverflowの回答から、これは効果がないようですが、接線方向に関連する問題に関する他の誰かの意見を信頼しているだけです。 もっと知識のある人がそれを調べて私の回避策を紹介できれば、きっと素晴らしいアイデアでしょう。

グーグルで検索してラッキーになり、他の人に知ってもらいたかった。

@hyperknot @href数週間以内に、テストブラウザのセットに対していくつかのベンチマークを実行します。

@IvanSanchez @hrefまた、このハッキングを、グローバルに適用するだけでなく、影響を受けるブラウザのみに制限することをお勧めします。

@IvanSanchezリーフレットのレンダリングパフォーマンスをプロファイリングするための推奨ワークフローはありますか？

また、このハッキングをグローバルに適用するだけでなく、影響を受けるブラウザのみに限定することをお勧めします。

個人的にはSafariでしか見ないので、サファリに限定するのが理にかなっています。 しかし、Chromeでこれを見ている人々の言及がありました。 誰かが他のWebkitブラウザでこのバグをまだ見ていますか？

L.Mapコンストラクターで、選択したブラウザーのみのCSSクラスをマップに追加するのは非常に簡単です。

@hrefこの問題は私のChromium49にあります

@hyperknot私はこれらの種類のものを

@hrefまた、この修正により、Chromium49のタイルが.leaflet-container { background: black } ：

img.leaflet-tile.leaflet-tile-loaded { box-shadow: 0 0 1px rgba(0, 0, 0, 0.05); } ：

：crying_cat_face：

それは変だ。 この問題は、Chromium 49（OS X El Capitan）には存在しません。また、ボックスシャドウはどちらの方法でも影響を与えないようです。

最新の遊び場を作成しました： http ：

リーフレットのないバグをWebkitチームとBlinkチームに提出します。

OK、問題を再現する最小限のリーフレットなしの例を作成することに成功しました。
http://playground-leaflet.rhcloud.com/say/1/edit?html、output

提出されたChromiumバグレポート： https ：

提出されたWebkitバグ： https ：

img-lessバージョン： http ：

[email protected]からのChromiumバグレポートからの

ちょっとあなたたちに簡単な更新を提供したいだけです。 私はこの問題に積極的に取り組んでいます。

問題は、要素のローカル空間で物事をラスターすることが原因でした。 要素に分数変換がある場合、ラスタライズされたテクスチャは、線形リサンプリングを使用した分数変換で画面に貼り付けられ、結果としてぼやけます。

解決策は、物理画面にピクセル整列された空間で物事をラスター化することです。 つまり、ラスターテクスチャの代わりに、分数変換をベクターグラフィックスコマンドに適用します。

修正は2つの部分で行われます。

1. ラスターシステムが任意の一般的な行列でラスターできるようにする最初の部分。 この部分はほぼ完了しています。 WIPを使用していますが、パフォーマンスの低下を引き起こすバグがまだあります。 数日で完成する予定です。
   https://codereview.chromium.org/2075873002/
2. タイリング管理で、さまざまなラスター変換に付属する一連のテクスチャを管理できるようにする2番目の部分。 私はもともと一般的なマトリックスを使用していましたが、タイルカバレッジの計算が非常に困難になることがわかりました。 代わりに、変換とスケーリングのみをサポートするより単純なバージョンを実行します。 これにはもう1週間の作業が必要になると思います。

M53ブランチで着陸しようと思いますが、時間がきついです。 これはM54で修正できることは間違いありません。

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

バグレポーターへ：

アップロードしたテストケースは、ピクセルスナップを別の方法で処理したChromiumのエッジケースをトリガーしました。 タイルにコンテンツを追加すると、背景に継ぎ目が表示されなくなります。 エッジケースは簡単に修正できますが、タイルの内容に継ぎ目が残っている可能性があります。

これは難しい問題であり、唯一知られている完璧な解決策はFSAAを使用することです。これは、CPU /メモリのコストのためにブラウザでは使用できません。 すべてのベンダーは、一部のコンテンツが正しく見えないという犠牲を払って、一部のコンテンツをより見栄えよくするために独自のヒューリスティックを開発しています。

例： http ：

Chromeは正しいジオメトリで描画しますが、エッジは詰まった豚のようににじみます。
Firefoxは、最初のボックスを49x49として描画し、2番目のボックスを49x50として描画します。
Edgeは、最初のボックスを50x50として描画し、2番目のボックスを50x49として描画します。 両方ともエイリアシングあり。

また、コンテナに回転を追加すると、すべての実装がエッジをブリードします。

私が推奨する回避策は、タイル間にオーバーラップを追加することです。 A4の紙でポスターを作るのと同じです。 アイデアは、すべてのスケーリング後に各タイルが少なくとも1ピクセルをオーバードローすることを確認することです。これにより、各物理ピクセルが少なくとも1つの不透明ピクセルで覆われることが保証されます。 重なりの幅は、サポートする最小のスケールによって異なります。 たとえば、1/4サイズまでサポートする場合は、4ピクセルのオーバーラップを追加します。

以下は、これに取り組みたい他の開発者のための詳細な分析です。

レポーターによってアップロードされた再現は、ccで最適化されたコードパスをトリガーするため、あまり良い再現ではありませんでした。 レイヤーが完全に単色であることが検出されると、コンテンツスケールの概念を持たないSolidColorLayerImplとして描画します。 これが簡略化された再現です： http ：

ブラックボックスは、サイズ（100、100）のSolidColorLayerImplとして描画され、サイズ（100、100）の単一の単色クワッドを生成します。これは描画変換によって画面に投影されて（99.5、99.5）になります。 アンチエイリアスを使用すると、ピクセルの右端の列と一番下の行が半透明で描画されます。

一方、レイヤーに何かを追加してccをだまし、レイヤーが単色ではないと思わせる場合、問題は2つの場合に発生します。

1. 最後のタイルは単色です。例： http ：

内容のサイズは切り上げられるため、スケーリングされたレイヤーサイズは（600、300）* 0.995 =（597、298.5）のみですが、（597、299）として上書きされます。

1. リストタイルが単色ではない場合、例： http ：

内容のサイズは切り上げられます。 ここでも、実際のスケーリングされたコンテンツは（600、300）* 0.995 =（597、298.5）のみをカバーし、生成されたクワッドは（597,299）をカバーします。 ピクセルの最後の行は、アンチエイリアスのために半透明であると想定されていますが、実際には、レイヤーを作成した要素の背景色であるレイヤーの背景色で塗りつぶしています。

背景に継ぎ目はありませんが、コンテンツがそれを覆うことになっているときに、背景がエッジでにじむ可能性があります。 例： http ：

非単色タイルを使用した他のテストケース：
http://playground-leaflet.rhcloud.com/giqo/edit?output

@hyperknotの素晴らしいアップデートですが、これら2つの引用符は互いに矛盾しているようです（1つは修正に取り組んでいると言い、次の引用は適切な修正が不可能だと言っています）。 それで、私たちは修正を待つのでしょうか、それともそれが永遠にこのようになることを受け入れるのでしょうか？

@mourner申し訳ありませんが、完全なコンテキストは含まれていません。もちろん、その通りです。 したがって、元のバグレポートは次のとおりです。
https://bugs.chromium.org/p/chromium/issues/detail?id=600120

ある時点で、それは別の問題に統合されました：
https://bugs.chromium.org/p/chromium/issues/detail?id=521364

その別の問題では、解決策を含む元の長い返信を受け取りました。 私は彼がリーフレットのケースが彼の仕事によって本当に修正されているかどうかを確認できるかどうか尋ねました、そして彼は答えました：

リーフレットの問題は実際には別の問題であると申し訳ありません。 600120号を再度開き、分析を共有します。

そのため、Leafletバグが再開され、Leafletバグ1で2番目の応答が返されました。 ところで、現在の最新のアップデートは次のとおりです。

私はモバイルグーグルマップを見て、彼らがそれをどのように扱ったかを見ました。 彼らもこの問題に悩まされていることがわかりましたが、彼らはそれを目立たなくするためにいくつかのUIトリックを行いました。

まず、ビューポートタグを使用してブラウザのピンチズームを禁止し、JSにピンチズームを実装しました。 ピンチズーム中も、タイル間の継ぎ目を確認できます（高解像度ディスプレイでは非常に微妙です）。 ズームジェスチャが終了すると、スケール係数を最も近いタイルセットにスナップします。 したがって、基本的にタイルは、ズームジェスチャ中を除いて、常にネイティブ解像度で表示されます。

正直なところ、まだしっかりした計画はありません。 月曜日に他の絵の具の人たちと話し合うつもりです。

ところで、モバイルグーグルマップ（私はウェブサイトのものだと思います）は私たちとまったく同じ技術を使用しているようです。

@mourner @IvanSanchez will-changeを使用した可能な解決策を
https://bugs.chromium.org/p/chromium/issues/detail?id=600120#c15

現在の階層化は重要ですか？ 各タイルが独自のレイヤー（translate3d）に強制され、これらのレイヤーは独立して小数値でスケーリングされていることがわかります。

各マップタイルを個別に（レイヤーを使用するか、drawImageRect +フラクショナルCTMを介して）スケーリングする限り、フラクショナルスケール値の場合、ピクセル整列されていないエッジが取得されます。 これにより、離散AAが背景色のにじみを引き起こす、唯一の一致エッジアンチエイリアシング問題がトリガーされます。

代わりにこれが機能すると思う方法は、非分数スケール（たとえば1.0）でマップをラスタライズしてから、アトミックにダウンスケールすることです。

1）個々のタイルの階層化を回避します（「transform：translate3d（）」の代わりに「transform：translate（）」を使用します）
2）コンテナ（マップ全体）の階層化を強制します（コンテナで「transform：scale3d（）」を使用します）
3）スケール== 1.0でコンテナレイヤーのラスタライズを強制します

これらの変更により、マップタイル画像を1.0のスケールでラスタライズする必要があり（=>エッジはピクセル整列=>継ぎ目アーティファクトなし）、マップレイヤー全体をアトミックにダウンスケールする必要があります。

残念ながら、＃3は些細なことではなく、私が考えることができる唯一のハックは

• scale（1）から始めて、変更します：変換（詳細については、https：//groups.google.com/a/chromium.org/forum/#！topic / blink-dev / Ufwrhx_iZ7Uを参照してください）
• 最初のラスターパスの後で、レイヤースケールを目的の値にリセットします

例：http ：

chrishtr / danakjレイヤーラスタースケールのセマンティクスを正しく取得しましたか？レイヤーラスター化スケールを特定の値にロックするためのより良い方法はありますか？

あなたはそれに答えるのを手伝ってもらえますか？

修正が進行中であることは知っていますが（それを推し進めてくれてありがとう！）、それまでの間... @ cmuldersのモンキーパッチが最適です。 これは、Leafletをnpmモジュールとして取り込み、ES6を使用し、誰かがコピーパスタの良さを探している場合に備えて、二重パッチがないことを保証するバージョンです。

https://gist.github.com/ericsoco/5712076f69f9068b11d41262b9e93666

import leaflet from 'leaflet';
// ...
patchMapTileGapBug();
// ...
function patchMapTileGapBug () {

    // Workaround for 1px lines appearing in some browsers due to fractional transforms
    // and resulting anti-aliasing. adapted from <strong i="9">@cmulders</strong>' solution:
    // https://github.com/Leaflet/Leaflet/issues/3575#issuecomment-150544739
    let originalInitTile = leaflet.GridLayer.prototype._initTile;
    if (originalInitTile.isPatched) return;

    leaflet.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';
        }
    });

    leaflet.GridLayer.prototype._initTile.isPatched = true;

}

人々がこれを調べてくれてうれしいです。 理想的とは言えない回避策として誰かに役立つ場合：慣性を犠牲にする場合は、マップのinitにintertia:falseを設定すると、ギャップがなくなり、場合によってはzoomAnimation:false

私はこれに対する（過度に複雑な）解決策を見つけたと思います、私はそれをhttps://github.com/Leaflet/Leaflet.TileLayer.NoGapに載せました-パフォーマンスがわからないのでコメントは大歓迎です古いコンピュータ/電話でそのことの。

cc @Eschon @hyperknot

ところで、このバグは、高DPI（2560x1140）画面でChromeを使用しているときにも発生します。リーフレットの分数ズームや、ブラウザーのズームを使用する必要はありません。

返事が遅れて申し訳ありません。

私はあなたのソリューションをテストしました。 デモはうまく機能したので、アプリケーションに修正を追加しようとしました。 私はまだ古い1.0-devバージョンのLeafletを使用していたので、 http： //leafletjs.com/download.htmlから1.0.0-rc3に更新しました。

私が最初に気付いたのは、ここにエラーがあるようだということthis._mapに変更しました。

その後は動作しましたが、私の仕事用コンピュータでは本当に遅いです。 特にChromeでは、Firefoxも遅かった。

驚いたことに、私がテストした電話にはそれほど大きな影響はありませんでした。
Android上のFirefoxは以前と同じように見えますが、Chromeは少し遅いですが、それほど悪くはありません。
iOSのSafariも以前とほぼ同じようです。

私が気付いたもう一つの奇妙なことは、モバイルChromeとSafariではピンチズームが固定レベルにスナップしているように見えることです

@Eschonこれをテストしてくれてありがとう！

私はいつもmap代わりにthis._map mapを入力するのを間違えます:-(

その後は動作しましたが、私の仕事用コンピュータでは本当に遅いです。 特にChromeでは、Firefoxも遅かった。

そのコンピューターでプロファイラーを実行できますか？ 速度低下がキャンバス操作に関連しているかどうかを知っておくと便利です。 IE9-IE11ではパフォーマンスが少し低下していることに気づきました。

このソリューションによって一部のプラットフォームでマップが遅くなるかどうかに基づいて、完全にオプションにし、デフォルトでオフにすることが理にかなっている場合があります。 ここでのいくつかのフィードバックは重要です！

OL3の人々がこの問題をどのように解決するか、またはキャンバス合成を有効にする前にブラウザーでパフォーマンス検出を行うかどうかについては、実際には調べていません。 一見の価値があるかもしれません。

私が気付いたもう一つの奇妙なことは、モバイルChromeとSafariではピンチズームが固定レベルにスナップしているように見えることです

それはzoomDeltaとzoomSnapオプションをいじっているだけで、このバグとは関係がないに違いありません。

そのコンピューターでプロファイラーを実行できますか？ 速度低下がキャンバス操作に関連しているかどうかを知っておくと便利です。 IE9-IE11ではパフォーマンスが少し低下していることに気づきました。

Chromedev-toolsを使用してJavaScriptCPUプロファイルを記録する必要がありますか？ 私はそのパフォーマンステストに関する経験があまりないので、それが示すデータをどうすればよいのかよくわかりません。

ええ、それが問題です。 次に、フレームチャートで幅広いものを探します。

修正を加えたプロファイルと修正を加えていないプロファイルを作成しました。 私は両方のプロファイルでほぼ同じことをしようとしました。

修正されたバージョンに_onZoomTransitionEndが原因で追加の「ピーク」（これが正しい単語かどうかはわかりません）があることに最初に気づきました

修正なしのバージョンでは、 _onZoomTransitionEndは1.8ミリ秒かかり、グラフにも表示されませんでした。 修正されたバージョンでは、6ミリ秒かかり、アクティビティの「ピーク」が発生しました。

他の2つの「ピーク」は、2つのプロファイルで非常によく似ていますが、少し異なるように見えますが、修正されたバージョンでは、それらの間のギャップが大きくなっています。

それがなんとかお役に立てば幸いです。 また、2つのプロファイルを保存したので、必要に応じてどこかにアップロードできます。

とりあえず、汚い回避策として、元の関数に.002のスケール係数を追加して、各タイルにtranslate3dプロパティを設定し、ギャップをほぼ完全に排除します。 「.002」は、ギャップを完全になくすためのテストケースで最も低い倍率でした。 副作用はありませんでした。

最新のChrome、Firefox、IE11でテスト済み。ブラウザ内のさまざまなズーム値でウィンドウスケーリングを150％に設定した40インチ4kモニターでテスト済み。

このバグの進展はありますか？ @AlexanderUhlあなたのソリューションは、配置されたときに画像の変更を引き起こしますか、それとも移動/ズーム中にのみ影響を受けますか？

この問題を解決するためにwill-change CSSプロパティが追加されたようです。ここで説明されているように、FFパフォーマンス警告を確認するだけで済みます： https ：

@themre ：scaleプロパティは、追加されるとすべての画像タイルに適用され、永続的になります。 スタイル属性は次のようになります。
style="width: 256px; height: 256px; transform: translate3d(545px, 745px, 0px) scale(1.002); opacity: 1;"

しかし、それは画像を少し引き伸ばすことになり、それは望ましくない効果です。 will-change CSSプロパティを持つ1.0.3バージョンを試しましたが、それでもホワイトギャップが発生します。 もう少し見てみます。

多くの場合、それはimgを拡張します、それがアプローチです;-)この回避策は理想的ではないことに同意しますが、通常は回避策の性質であるtbhではありませんか？ それにもかかわらず、このアプローチは、ごくわずかな副作用で私にとって最適に機能します（mapbox、ここ、osmなどからのタイルを使用したマッピングアプリケーションである私のユースケースの場合）

通常のtranslateを使用すると、問題は解決します。 translate3d CSSプロパティが通常の変換よりもはるかに高速かどうかはよくわかりません。おそらく、このフラグをオプションとして追加するのが最善でしょう。translate3dをtr​​anslateに置き換えるつもりだと思います。

動作中のビュー：

最新バージョン（1.0.3）で同じ問題に直面しています。

1.1で修正される可能性があります

2017月8上に、水は10：13で、のGaurav [email protected]書きました：

【画像：画像】
https://cloud.githubusercontent.com/assets/13112509/23697357/7dcc4cf6-040d-11e7-881a-df3a44254015.png
最新バージョン（1.0.3）で同じ問題に直面しています。

—
あなたが言及されたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/Leaflet/Leaflet/issues/3575#issuecomment-284987808 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AAeKj_23QbtFCaXeFjGRJcU-jg0284xBks5rjnEvgaJpZM4FO8Jh
。

.leaflet-pane.leaflet-map-pane divの変換に使用されるnxとnyの値が整数に丸められると、Safariでライン/ギャップの問題が解決されます。 有害な副作用は見られません（とにかく使用するため）。

これを見つける：
translate3d("+n.x+"px,"+n.y+"px,0)")
と置き換えます：
translate3d("+Math.round(n.x)+"px,"+Math.round(n.y)+"px,0)")

@LudwigBogner何らかのスケーリング（たとえば、ブラウザズームの設定、またはズームアニメーション中）を実行すると、とにかく失敗する可能性があります。 上記のリンク先のこの例を参照してください。ここでは、翻訳自体が丸められています： http ：

これに噛まれた。 私にとっては、ChromiumやFireFoxには存在しないようです。 Safariのフラクショナルズームのほんの一部です。

進捗？

この問題は、ChromeとFirefox（Mac）でも引き続き発生します。 0.25のzoomDeltaとzoomSnapを使用しています。

奇妙なことに、 .leaflet-tile { will-change: auto !important; } （または「未設定」）を設定すると、Firefox（のみ）の問題が修正されます。 Chromeの回避策をまだ探しています。

慣性を無効にし、translate3dコードを変更して丸めを追加するために提案された他の修正も機能しませんでした。

@jawinn L_DISABLE_3Dをtrueに設定すると、成功する可能性があると思います。IIRCは、 will-changeを変更するのとほぼ同じ効果があります。つまり、レンダリング時にハードウェアアクセラレーションが削除されます。地図。 ズームアニメーションやパンなどのパフォーマンスが大幅に低下する可能性があることに注意してください。

これらはすべてブラウザの実装の詳細に非常に敏感なので、これを一粒の塩で考えてみてください。私がこれを調べてからかなり時間がかかりました。

@jawinn
私が使用する回避策は、上記のものです。

/* 
 * 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';
        }
    });
})()

完璧ではありませんが、私が知る限り、パフォーマンスには影響しません。

みんなありがとう。 @Eschonそれはうまくいった。 ChromeまたはFirefoxにギャップは表示されなくなりました。

「1px修正」を使用する場合は、画像がぼやけて少し壊れることに備えてください。

• 比較1： https ：
• 比較2： https ：

元の画像のレンダリングとフォトショッピングに何時間も費やした私にとって、これは受け入れられませんでした。 そのため、 L_DISABLE_3D = trueを使用して、アニメーションのちらつきとジャンプするズームに耐えなければなり

詳細： leaflet-rastercoordsプラグインを使用しており、マップ設定は次のとおりです。

    map = L.map('map', {
        center: [3250, 1700],
        zoom: 5,
        minZoom: 2,
        maxZoom: 6,
        maxBoundsViscosity: 1,
    });

Q：そのような「タイル間のスペース」バグがないLeafletの次善の代替案は何ですか？

私はそれを自分でグーグルします、しかし多分誰かがすでにこの道を進んだでしょう。

@ n3tman NoGapプラグインも試しましたか？ 一撃の価値があるかもしれません。

@perliedmanこれに言及して
残念ながら、ローカルで動作させることができませんでした。 _initContainer関数でCannot read property 'appendChild' of undefinedエラーが発生しました。
以前のバージョンのLeaflet（最大1.0.2）で試してみました-同じ結果です。 デモでは、Chrome / Firefoxでも同じエラーが表示されます。
多分私は明白な何かを逃しています、あなたは助けてくれますか？

ここに同じ1pxのギャップ。

Chromeバージョン66.0.3359.139（64ビット）
Windows 10（1709）
リーフレット1.3.1

この問題を最初に開いたとき、それが部分ズームレベルに関連していることがわかりましたが、これがもはや唯一の原因ではない可能性があります。

最近、 GoogleMutantプラグインを使用するプロジェクトを開始しましたが、ズームレベルを整数に設定し、少しだけパンしたときにもこれが発生することがわかりました。

ズームやパンを行ってもギャップは表示されますが、＃6069に関連しているようで、＃6240で修正されています。

また、他のプロジェクトから回避策を削除しましたが、そこでも発生しているようですので、GoogleMutantプラグインに固有のものではありません。

@cmulders 1pxの回避策に触発され

(function(){
    var originalInitTile = L.GridLayer.prototype._initTile
    L.GridLayer.include({
        _initTile: function (tile) {
            originalInitTile.call(this, tile);

            var tileSize = this.getTileSize();
            var map = this._map;
            var isFix = function() {
                return !(parseFloat(tile.style.width) % 0 === 0);
            };
            var fixOn = function() {
                if(!isFix()) return;
                tile.style.width = tileSize.x + 0.5 + 'px';
                tile.style.height = tileSize.y + 0.5 + 'px';
            };
            var fixOff = function() {
                if(isFix()) return;
                tile.style.width = tileSize.x + 'px';
                tile.style.height = tileSize.y + 'px';
            };
            var checkFix = function(){
                var zoom = map.getZoom();
                if(zoom % 1 === 0) {
                    fixOff();
                }
                else {
                    fixOn();
                }                
            };
            map.on('zoomstart',fixOn);
            map.on('zoomend',checkFix);
            checkFix();
        }
    });
})()

3年以上経っても、このバグはChromeではまだ解決されていません。 FirefoxやSafariでは効果が見られません。 回避策をありがとう

ここでも同じです（Windows 7 Enterprise SP1）。 Firefoxではあちこちに線があり、Chromeでは完全な線グリッドですが、IE11では問題ありません。 @cmuldersの修正はFirefoxとChromeで機能します。

さらにいくつかのテストの完全な結果を次に示します。

• Windows 7 Enterprise SP1
  
  
  
  • IE11：わかりました
  
  
  • Chrome、Firefox： OKではありません
  
  
• ウィンドウズ10
  
  
  
  • IE11、Edge、Firefox：OK
  
  
  • Chrome： OKではありません
  
  
• マックOS
  
  
  
  • Safari、Chrome、Firefox：OK
  
  
• Linux：
  
  
  
  • Chrome、Firefox：OK
  
  
• アンドロイド：
  
  
  
  • Chrome、Firefox：OK
  
  
  • WebViewを使用するアプリ：OK
  
  

さらなるテストにより、これは明らかに非常に低レベルの問題であり、Leafletとは関係がないことが示されました。
Windows 7 Enterprise SP1でのテストは、最初は2台の異なるPCで行われましたが、どちらもNVIDIAグラフィックスを使用していました。

AMDRadeonグラフィックスを搭載したWindows7 Enterprise SP1で同じテストを行ったところ、問題はなく、ChromeまたはFirefoxのタイル間に線はありませんでした。

NoGapについては前に説明したように、元のコードを取得して、現在のリーフレットバージョン（リーフレット^ 1.3.3）で機能するように変更したことをお知らせしたいと思います。
https://github.com/Endebert/squadmc/blob/master/src/assets/Leaflet_extensions/NoGapTileLayer.js

その後、通常のTileLayerのように使用できます： //github.com/Endebert/squadmc/blob/master/src/assets/SquadMap.js#L34

es6機能を使用しているため、機能させるにはいくつかの変更が必要になる場合があります。

NoGapについては前に説明したように、元のコードを取得して、現在のリーフレットバージョン（リーフレット^ 1.3.3）で機能するように変更したことをお知らせしたいと思います。
https://github.com/Endebert/squadmc/blob/master/src/assets/Leaflet_extensions/NoGapTileLayer.js

その後、通常のTileLayerのように使用できます： //github.com/Endebert/squadmc/blob/master/src/assets/SquadMap.js#L34

es6機能を使用しているため、機能させるにはいくつかの変更が必要になる場合があります。

@Endebert NoGapを機能させることができましたか？ 少し前に@ n3tmanと同じエラーが発生しました：
Cannot read property 'appendChild' of undefined _initContainer関数のCannot read property 'appendChild' of undefinedエラー。

あなたのバージョンで私が見つけた唯一の変更は、 try ... catchの呼び出しにlevel.ctx.drawImage(imageSource, offset.x, offset.y, tileSize.x, tileSize.y); try ... catchを追加することです
そしてそれは助けにはならなかった。

@TomazicMはい、私の実装は私のアプリSquadMCで使用されています。 デスクトップではそれほど明白ではないかもしれませんが、モバイルでは、スナップなしの分数ズームが有効になっていることは明らかです。

実装に関して：元のバージョンはTileLayer.include()を使用しますが、私はTileLayer.extend()を使用します。 それが重要な違いだと思います。 前述のように、これはTileLayerの代わりに使用することを目的とした新しいクラスです。

さて、これが2時間の調査の結果です。 この問題は、 translate3d内のピクセルの小数が原因で発生します。

<div class="leaflet-pane leaflet-map-pane" style="transform: translate3d(-10.7773px, -8.41406px, 0px);"></div>

ソースコードのこのtranslate3d使用しないため、 L_DISABLE_3D = trueでうまく機能するのはそのためです。

解決

10進ピクセルを許可しないでください。 これは、たとえば次の方法で実現できます。

• ポイントコンストラクタを常に丸い座標に変更する
• またはtranslate3dが設定される前の丸めオフセット

```js
var pos = (offset && offset.round()) || new Point(0, 0);
```

• または多くのそして多くの他の解決策によって...

さて、これが2時間の調査の結果です。 この問題は、 translate3d内のピクセルの小数が原因で発生します。

今日は2019年であり、 translate3dを使用して最新のブラウザーでGPUを強制的に使用することはかなり時代遅れだと思います。 お疲れ様でした@mdorda

@mdordaこんにちは！ 面白そうに聞こえますが、丸めについてはこのスレッドで以前に説明したことがあります： https ：

それ以降に重要な変更があったかどうかはわかりませんが、徹底的なテストを行うまでは期待が持てません。

これを解決するための最初のステップは、これをテストできるようにPRを提出することです。

Angular 2+を使用している人のために、私はこの方法でそれを解決しました。 それは私の単純なユースケースで機能しますが、他の影響についてはわかりません...

const tileLayer = new TileLayer(this.tileLayerUrlTemplate, this.tileLayerOptions);
tileLayer.on('load', () => {
    for (const tile of Array.from(document.getElementsByClassName('leaflet-tile'))) {
        (<HTMLElement>tile).style.height = (tile.clientHeight + 1) + 'px';
        (<HTMLElement>tile).style.width = (tile.clientWidth + 1) + 'px';
    }
});
this.map.addLayer(tileLayer);

このピクセルギャップは、Mozilla Firefox 69.0.1（64ビット）を搭載したWindows 10 Pro1903のLeafletJSバージョン1.5.1の分数ズームで見られます。
ピクセルギャップ
ピクセルギャップの理由は、translate3d（）CSS関数ではなく、scale（）にあると思います。

バージョン1.5.1では、私が見るように、translate3d（）パラメーターは整数のみです。

よろしくお願いいたします。IMMSPgisgroup

このバグの解決策を見つけましたか？

この瞬間に同じ問題が発生し、解決策が見つかりませんでした。

私は使用しています：

• Windows 10 Home 1803
• GoogleChromeVersión77.0.3865.90（公式ビルド）（64ビット）
• リーフレット1.5.1

Firefoxを使用すると、白い線が表示されません

@ Arenivar93

Na私はここ数年これに目を向けてきました。 彼らはいくつかの回避策を試しましたが、大きな妥協なしにそれを修正するために何も機能しませんでした。 問題の根本はクロムの上流にあります： //bugs.chromium.org/p/chromium/issues/detail？id = 600120

クロムチームからの最新のメッセージは、他のものを壊さずに行うのは難しすぎるので、しばらくの間それで立ち往生するかもしれないということです。

特に暗い地図や画像（私の場合）では、この問題は非常に顕著です。 Ivanが述べたように、ブラウザでのアンチエイリアスにより、ズーム中の_fractional_変換が原因でタイル間にスペースが生じると思います。

より良い解決策が利用可能になるまで、この回避策（またはハック）を使用してタイルを1ピクセル大きくし、副作用として1ピクセル重なるようにします。 それに加えて、タイルはわずかに拡大および拡大縮小されます（1px）。

/* 
 * 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';
        }
    });
})()

このソリューションにはかなりの幸運がありました。 それは完璧ではありませんが、私たちの意見では線よりも優れています。

それに加えて、マップの背景色がベースマップの色とより一致するようにしました。 たとえば、海が紺色の場合、タイルがその色に重なるように使用して、目立つ不整合の一部を最小限に抑えます。

再び完璧ではありませんが、それは役立ちます

@colbyfayockソリューションをどこにどのように実装しますか？

異なる可能性があるため、reactアプリを作成していますが、次の内容のファイルを作成しました。

// Fix via https://github.com/Leaflet/Leaflet/issues/3575#issuecomment-150544739
import L from 'leaflet';

(function () {
  if (!L || !L.GridLayer || !L.GridLayer.prototype) return;

  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';
    }
  });
})();

一番上のリターンは、プリコンパイルされて常に利用できるとは限らないためです（ここでは重要ではありません）

リーフレットをインポートした後、単にインポートします

import L from 'leaflet';
...
import '../plugins/leaflet-tilelayer-subpixel-fix';

私の回避策は、ソースコードに変更を加えずに変換値を丸めることです。
reactで使用しますが、JQueryであるため、どのフロントエンドでも使用できます
それが最善の選択肢であるとは言わず、ただそれを成し遂げるだけです。
これにより問題が修正され、目立ったぼやけや何らかの欠陥は観察されませんでした。 試すだけの価値があります。

    this.leftMap.on('move', () => {
      const mapDiv = window.document.getElementsByClassName("leaflet-pane leaflet-map-pane")
      let styleString = mapDiv.getAttribute("style");
      const transformValue = styleString.substring(styleString.indexOf("(")+1,styleString.indexOf("px,"));
      const roundedTransformValue = Math.round(parseFloat(transformValue));
      styleString = styleString.replace(transformValue,roundedTransformValue);
      mapDiv.setAttribute("style",styleString);
    });

@ colbyfayock-私にとっては修正されていないようです。 :(

ズームスナップ0の反応リーフレットを使用しています。

解決策は私たちにとって完璧ではありませんでしたが、私たちの中には確かにそのような一貫した線がありません。 zoomSnap機能についてはよくわからなかったので、調べなければなりませんでした。説明を読んでいると、 0がそのプロパティでどのように機能するかわかりません。 それがなくても線がまだ存在するかどうかを確認するために、それを削除しようとしましたか？

https://leafletjs.com/examples/zoom-levels/#fractional -zoom

編集：サンプルgifの後に読み続けました

zoomSnapはゼロに設定できます。 これは、リーフレットがズームレベルをスナップしないことを意味します。

ソリューションが完全な整数のデフォルトスナップを超えて処理できないという分数の状態になっていると思います🤷‍♂️しかし、確かではありません

リーフレット1.7-devでも、問題は解決しません。 FirefoxとWindows7およびWindows10のChromeのタイルの境界線。IE11および古い（クローム以外の）Edgeでは問題ありません。新しいChromeベースのEdgeでも同じ問題が発生します。

実用的な解決策は2つありますが、どれも好きではありません。 1つは<script>L_DISABLE_3D = true;</script>で3dを無効にすることですが、これはアニメーション操作を失うことを意味します。 もう1つは、タイルのHTML要素を1ピクセル拡張することですが、これは、タイルがわずかにぼやけることを意味します。

私は非常に原始的な解決策を見つけましたが、原始的であるという性質上、100％機能します。 多分誰かがそれが役に立つと思うでしょう。

解決策は、同じ問題のあるタイルレイヤーを2つの異なるマップペインに2回表示し、一方を他方の下に配置し、オフセット[-1、-1]を設定することです。

コードは次のようになります。

<style>
  .originOffset {
    transform: translate(-1px, -1px);
  }
</style>

<script>
  var pane1 = map.createPane('pane1');
  var pane2 = map.createPane('pane2');

  pane1.style.zIndex = 210;
  pane2.style.zIndex = 220;

  L.DomUtil.addClass(pane1, 'originOffset');

  var layer1 = L.tileLayer( ... , {
    pane: 'pane1',
    ...
  });
  var layer2 = L.tileLayer( ... , {
    pane: 'pane2,
    ...
  });
  var layer = L.layerGroup([layer1, layer2]);
</script>

@cmuldersの提案から、私はこれらの行を広告し、タイル間にこれ以上のスペースはありません

map.on（ 'ズームエンドドラッグ'、function（）{
$（ '＃map> div.leaflet-pane.leaflet-map-pane> div.leaflet-pane.leaflet-tile-pane> div> div> img'）。each（function（）{
if（String（$（this）.css（ "width"））。includes（ '。5'）=== false）{
var imgW = String（$（this）.css（ "width"））。split（ "px"）。join（ ".5"）
var imgH = String（$（this）.css（ "height"））。split（ "px"）。join（ ".5"）
$（this）.css（ "width"、imgW）;
$（this）.css（ "height"、imgH）;
}
}）;

私は@mdordaを使用していleaflet-map-paneのtranslate3d()の呼び出しで整数が生成されると、（目隠しをオンにして）問題は解消されます。そして、すべてが再び美しいです。 分数を保持する必要がある場合の微妙な違いをすべて理解しているとは言いませんが、ブラウザの問題からリーフレットにある程度の救済が得られる場合は、 L.Draggable._onMoveをフローリングに入れてもかまいません。

    offset.x = Math.floor(offset.x / this._parentScale.x);
    offset.y = Math.floor(offset.y / this._parentScale.y);

またはL.DomUtils.setTransform

    pos.x = Math.floor(pos.x);
    pos.y = Math.floor(pos.y);

そのため、分数が与えられる翻訳はありませんが、タイル画像は分数の翻訳にはならないので、おそらく無駄になります（右？）。

実際のサイズではなく、ブラウザの設定が拡大されたことを発見するために2時間を無駄にしました
ズームを実際に戻すだけで、すべてが魅力のように機能しました。これが私の場合でした

実際のサイズではなく、ブラウザの設定が拡大されたことを発見するために2時間を無駄にしました
ズームを実際に戻すだけで、すべてが魅力のように機能しました。これが私の場合でした

@tokenflow ：このトピックは、文字通り「Webkitブラウザーの分数ズームレベルのタイル間のスペース」に関するものです。 私はここで生意気にならないように心がけていますが、100％にズームすることに関するあなたの情報は、誰かにとって有益な貢献だと本当に思いますか？

FirefoxとChromiumの両方のLinuxバージョンでこのバグに遭遇しました。
問題は（少なくともFirefoxの場合）、メインの.leaflet-tile-containerのscale()にあるようです。これは、 document.querySelector('.leaflet-tile-container:last-of-type').getAttribute('style')見つけることができました。
例： scale(0.707107)がありますが、すべてのimgの子は幅/高さ256です。したがって、次のように計算します。 0.707107 * 256px = 181.019392px 、これは10進数です。 次にピクセルを丸めてスケールとして使用すると、Firefox / Linuxで機能するようです： 181px / 256px = 0.70703125 。

デバッグに役立つ関数を作成しました。

function getCurrentScale (doFix = false) {
    const tileContainer = document.querySelector('.leaflet-tile-container:last-of-type');

    if (!tileContainer) {
        return;
    }

    const tileStyle = tileContainer.getAttribute('style');
    const scaleRegEx = /scale\(([0-9\.]+)\)/i;
    const matches = scaleRegEx.exec(tileStyle);

    if (!matches || matches.length !== 2) {
        return;
    }

    const scale = parseFloat(matches[1]);

    const mod = (scale * 256) % 1;

    if (mod) {
        console.log('scale is off by px:', mod);
        if (doFix) {
            const newScale = Math.round(scale * 256) / 256;
            console.log('old scale / new scale', scale, newScale);
            const newStyle = tileStyle.replace(scaleRegEx, `scale(${newScale})`);
            tileContainer.setAttribute('style', newStyle);
        }
    } else {
        console.log('scale seems to be fine:', scale);
    }
}

最初のパラメーターとしてtrueを指定して呼び出すと、スケールを修正しようとします。 ただし、これはFirefoxでのみ機能します。

私は愚かで実際には機能しないはずの修正を見つけました。

.leaflet-tile-container img {
    width: 256.5px !important;
    height: 256.5px !important;
}

これにより、タイルの周りに大きな耳障りな継ぎ目が生じるはずですが、まったく見えず、タイル間のスペースが固定されます。

@ ChrisLowe-Takorはどういうわけか実際に機能しているように見えますが、一見しただけでは理由がわかりません。
これは、現在使用しているJavaScriptの回避策よりも望ましい場合がありますが、もう少し調べてテストを行う必要があります。

@ ChrisLowe-Takor-うわー、それは私にもうまくいきます！ 良い発見👍

@ ChrisLowe-Takorは、Leaflet-packageを使用して、Rでも機能するようです。 どうもありがとう！

@ ChrisLowe-Takorどういうわけか、このトリックはすべての愚かな現代のブラウザで実際にそれを行います（古い由緒あるIE11の場合は必要ありません）！ 覚えておくべきことが1つだけあります。オプションdetectRetinaがタイルレイヤーに使用され、ディスプレイがRetinaディスプレイの場合、タイルサイズは125 x 125pxになります。

ただし、このソリューションには、タイルコンテナの拡張に基づくすべてのソリューションと同じ欠点があります。つまり、タイルが少しぼやけます。

@ ChrisLowe-Takor試してみました。 maxZoomがmaxNativeZoomより大きい場合、タイルは正しく表示されません。