Tiles disappear after zooming in on Chrome on Android

[thordursigurdsson]

Noticed this after updating to Chrome 30.0.1599.82 for Android (4.1.2 and 4.2.2).
When zooming in the tiles seem to disappear, but will reappear when you move the map.
Tested on 0.6.4. The map on mapbox.com/tour (0.6.2) is also showing this behaviour.

http://jsfiddle.net/YZE6e/

[adrianrego]

seeing the same behavior on Android 4.3, same chrome version, and Leaflet master.

[cub]

I have the same problem. After a zoom (pinch or controller) I see 0.5second the loaded tile and them disappear. I have to pan once the map to see it. No problem until next zoom. I tried to do a layer.redraw() on zoomend with a timeout, the layer/tiles blink but still have to pan to view the map.
Chrome 30.0.1599.82, Leaflet 0.6.4 master, Android 4.1+

[mourner]

Thats quite weird... I'll try to check it out. Do you know if there's a known Leaflet version that works on the same browser version?

[cub]

Just found http://www.mycoursewalk.com/mobile_course_walk/course_view/752 from old issue #1182 and it work quite well with the lastest Chrome version. My map use osm format like (png) and his use google (jpg). I'm converting my tiles to .jpg to test [...] ok its not an issue of png/jpg. I tried to include his leaflet js+css, it didnt solve the problem (quite normal it's 0.6.4 too).

[mourner]

Hope it's reproducible on the emulator too... Need to try git bisect on the issue.

[cub]

http://jsfiddle.net/89WBd/12/
Native TileLayer blinks. The Google layer has no problem. Same version of Leaflet.

Reproducible on emulator (genymotion) but you have to install manually Chrome via the Google Play.

[cub]

Found a fix :
.leaflet-tile-container img {
-webkit-backface-visibility: hidden;
}

[mourner]

@cub that's surprising, given that we have this chunk of code in place: https://github.com/Leaflet/Leaflet/blob/master/src/dom/DomUtil.js#L205-L208

Can you check out why doesn't the existing workaround get executed?

[cub]

if (L.Browser.mobileWebkit3d) { // return TRUE it's ok
el.style.WebkitBackfaceVisibility = 'hidden';
}
but the el refer to div (see below) and not img
leaflet-tile-pane
leaflet-objects-pane
leaflet-shadow-pane
leaflet-overlay-pane
leaflet-marker-pane
leaflet-popup-pane

[mourner]

@danzel so, it seems that although tiles are positioned with top/left in Chrome as per your past improvements, they still need the backface visibility hack in some cases to work properly. Oh well...

[danzel]

lol :(

[auxbuss]

Looks like you have this cracked, but I just wanted to add that, as well as the above case, I also see behaviour when switching a map's lat/lng. For example:

  $('#locations').on('click', '.go-to-btn', function() {
    lat = $(this).data('lat')
    lng = $(this).data('lng')
    var latlng = new L.LatLng(lat, lng)
    marker.setLatLng(latlng)
    this_map.setView(latlng, 16)
  })

Chrome 30.0.1599.82, Android 4.3 (Nexus 4 & 7)

[auxbuss]

I needed to upgrade to 0.6.4 so I couldn't confirm before, but I can confirm that @cub's fix works here.

[mourner]

OK, thanks for looking into this guys. We surely want to put this fix before the next stable release.

[cub]

No problem, I'm happy to help. Keep up the good work ;)
I remain available for Android testing.

[mourner]

@danzel so, should we just include the CSS fix above, or add some more fishy logic to setPos in TileLayer - what do you think?

[danzel]

Leaning towards the css, we could set a class just for android if required.

[mourner]

@danzel lets do this.

[danzel]

The CSS fixes it for me, sent a PR

[mourner]

@danzel had to revert the CSS fix and put the hack in the JS instead, as that commit made all tiles a bit blurry in Chrome for OS X for me. Try comparing two pages (0.6.4 vs your commit) and you'll see the difference.

[danzel]

Weird, that makes no sense :(

[mourner]

That's the cruel reality with browsers, most of the issues are like that.

[danzel]

The css version caused gaps between tiles when zooming in chrome on windows desktop too by the looks.

[mourner]

@danzel the gaps still appear in Safari on OS X btw it seems. :(