Geek Answers Handbook

WebKit / WebView tap / onclick default highlight (Android Ice Cream Sandwich)

I am developing a webview application (4.0.3), and there is one unpleasant thing about watching an ice cream sandwich web: every time you click / click on a link or on any item with a click, blue is displayed (I think it depends devices). This doesn’t look very good, because I have my own actions with the tap added to the elements. It doesn't seem like the latest jQueryMobile (1.1.1) does a great job of this problem. In the previous version, all basic webkit styles were canceled.

If anyone knows how to get rid of the annoying backlight, he would really appreciate it.

Cheers, qmacpit

Of course, I tried changing them before I asked:

-webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(0, 0, 0, 0);

but it does not work in the case of an ice cream sandwich. This solution works in Android 2.3, where we have the infamous "orange border" when we click on the link. It seems like this is part / customization of WebView. You have the same behavior viewing pages in your own browser. This is really annoying because it concerns not only links, but also buttons and other html elements.

In addition, it is still not allowed by jQuery Mobile teem, although it has a significant effect on the graphics. Either they have not yet seen this, or they are still working on a solution.

Any other suggestions?

+4
source share
4 answers

I ran into the same problem (android always highlighted the svg element even with the CSS suggested above). Honestly, I do not know why the css rule was not applied (I am 100% sure that it was not overridden), but I found another solution.

It seems that the selection is only highlighted for elements for which the onclick receiver is set. I found out that installing the onTouchStart listener instead of the onClick listener actually solved my problem.

I tested it on a Galaxy Nexus with JB 4.2. Please do not apply the CSS rule in the following example, as expected.

 <!html> <html> <head> <title>Click/touch test</title> <script type="text/javascript"> function reset() { document.getElementById("A-test").innerHTML="On click listener"; document.getElementById("A-test2").innerHTML="On touchstart listener"; } window.onload = function() { document.getElementById("A-test").onclick = function () { this.innerHTML = "see the highlight" } document.getElementById("A-test2").ontouchstart = function () { this.innerHTML = "no highlight here" } } </script> </head> <body> <div id="A-test">On click listener</div> <div style="height: 60px"></div> <div id="A-test2">On touchstart listener</div> </body> </html>

Here's jsfiddle http://jsfiddle.net/aQ9zM/2/

+3
source

I finally found the answer:] this is a web view function that can be turned off when called

 setLightTouchEnabled(false)
+1
source

This should disappear if you set these css properties for your elements:

 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(0, 0, 0, 0);
0
source

Set the following css property: -webkit-tap-highlight-color: rgba (0,0,0,0); This will not cause problems with the input fields. But in this case, you need access to the HTML code that you use (although you can embed this in the HTML anyway).

0
source

More articles:


All Articles