Samsung Galaxy Tab 10.1 and -webkit-tap-highlight-color style?

问题

I'm trying to turn off the default Android web 'highlighting' (the -webkit-tap-highlight-color style 'fix' that is recommended everywhere) - this works great on most devices, but not my Galaxy Tab 10.1 - anything with a 'click' handler, will always get highlighted in the default 'dark' colour when it is 'clicked' in the browser.

eg.

I have this in my CSS :

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

• then using jQuery setting up a 'click' hander on a div :

  < div id="test" >some kind of contents< / div >

• with code such as :

  $("#text").click(function(e) { alert("Hello !") } );

with that simple code, running in the Galaxy Tab 10.1 browser, you always get the 'highlight' on the div, it appears to ignore the style completely ?

Anyone have any ideas ? It appears that by using 'touchstart' and 'touchend' events this goes away depending on the 'level' that I capture those events at, but that seems like overkill - is there anything special about the Galaxy Tab browser ? I've tried searching, but there's so many combinations of terms to look for I'm lost :(

Thanks

Chris

回答1:

try giving it any any color other than the default! e.g. -webkit-tap-highlight-color: rgba(58, 52, 222, 0.5);

On some Android devices where I have tried to change the default highlight color, it ends up making sure the color never works!

-And once you've checked that out, try adding !important at the end of the color, that one seems to force back the default color!

回答2:

Add this to your CSS. Is tested and working on Samsung Galaxy S9.

html {
-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
-webkit-tap-highlight-color: transparent !important;
}

来源：https://stackoverflow.com/questions/7715678/samsung-galaxy-tab-10-1-and-webkit-tap-highlight-color-style