Selectable tiles in IE11 (highlighted in blue)

[VictorVelarde]

• I've looked at the documentation to make sure the behavior is documented and expected
• I'm sure this is a Leaflet code issue, not an issue with my own code nor with the framework I'm using (Cordova, Ionic, Angular, React…)
• I've searched through the issues to make sure it's not yet reported

Steps to reproduce

• step 1: open a simple map using tiles, like https://leafletjs.com/examples/map-panes/example.html
• step 2: start a mouse selection, from the bottom-right (attribution control) to the upper-left corner
• step 3: in IE11 tiles are selected, displaying a blue color. That doesn't happen in other browsers, such as latest Chrome 72.

Expected behavior
No tiles are selected

Current behavior
Tiles are selected, and they appear in a blue color, like this:

Environment

• Leaflet version: 1.4
• Browser (with version): IE11
• OS/Platform (with version): Windows 10

Additional context
There is a piece of css code in Leaflet 1.4 that theoretically prevents tiles from being "selectable" (thus blue):

.leaflet-tile, .leaflet-marker-icon, .leaflet-marker-shadow {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

But it seems that in IE11 these selectors are not enough. Even adding custom -ms-user-select: none; doesn't fix the problem: the tiles selection keeps happening.

To remove this visual problem, there is a work-around that could be applied, which is adding this css:

.leaflet-tile::selection {
  background: transparent;
}

[IvanSanchez]

¡Hola, Víctor!

Oh gosh, not another IE11 bug. And it's supposed to honour user-select:none since IE10.

Setting the background on the ::selection pseudo-element of the tiles seems elegant enough for the circumstances. Would you mind creating a PR with that?

[VictorVelarde]

I will, thx @IvanSanchez !

[IvanSanchez]

Closed by #6570