Remove tap-highlight effect on iPhone

[Jonas074]

At least on iPhone you get a highlight effect over the map when tapping. A solution for this could be setting the "-webkit-tap-highlight-color" to transparent like https://github.com/Hallstahammarskommun/origo/commit/b80d5dacb2583306dbb9ffe8fe13a859555ae4f5

[afogelberg]

Nice solution @Lund-gren . My only concern is possible side effects and also removing highlight for other elements such as forms. Have you tried to set -webkit-tap-highlight-color to only the canvas element?

[Jonas074]

There is already -webkit-tap-highlight-color set here https://github.com/origo-map/origo/blob/master/css/style.css#L99 which not seems to work on iPhone.

However this works and would be slightly better to use

.ol-viewport {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

But the same tap-effect seems to accur on both mapmenu and the search bar, what do you think about those? If we don't want the effect there maybe it would be better to set it on the map.

[Jonas074]

To set it directly on the canvas does not seam to work.

[afogelberg]

I see. Then it seems like it's the click event on the map wrapper that is the root of the problem. Then I think we should use your original suggestion but limiting the side effects like this:

.o-map > .map {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

I havn't verified it but help on this is appreciated.

[Jonas074]

That works good and also removes the effect on both mapmenu and searchbar. However links in the popup is also effected by this.

I've tried to set it on .map > .ol-viewport, that will remove the effect on the map but also links in the popup.

[markus659]

Should we go with the following solution proposed by @afogelberg then?

.o-map > .map {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

Seems to work OK, what do you think @afogelberg @jokd ?

[afogelberg]

@markus659 I say we go for this solution, I will go on fix it

[afogelberg]

Fixed with eb05a23c47bcd5e92f4f46f26474e1a6616f6576 . Since one wrapper level has been removed from Origo, the solution was only:

.o-map {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

Please reopen if any side effects is encountered.