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

I'm developing a webview application (4.0.3) and there is one annoying thing about the ice cream sandwich webview: every time there's a tap/on click event on a link or any clickable element there's a blue(I think it's device dependent) highlight displayed. It doesn't look very nice bacause I have my own tap actions added to the elements. It doesn't seem that the newest jQueryMobile(1.1.1) handles the issue very well. In previous version all major webkit styles has been overridden.

If anyone has any idea how to get rid of the annoying highlight it will be much appreciated.

Cheers, qmacpit


Of course I've tried to change them before I asked:

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

but it doesn't work in case of Ice Cream Sandwich. This solution worked in Android 2.3 where we have an infamous 'orange border' when clicking the link. It looks it is a part/setting of a WebView. You've got that same behaviour browsing pages in the native browser. It is really annoying because it concerns not only links but also buttons and other html elements.

Besides, it is still not solved by jQuery Mobile teem although it affects graphics quite significantly. Either they haven't see it yet or they are still working on a solution.

Any other suggestions?

Answers


I found myself with the same problem (android was always highlighting an svg element even with the CSS suggested above). Honestly I don't know why the css rule was not enforced (I'm 100% sure it wasn't overridden) but I found another solution.

It looks like that the highlight is given only to elements for which an onclick listener is set. I found out that setting an onTouchStart listener instead of an onClick listener actually solved my problem.

I tested it on a Galaxy Nexus with JB 4.2. Please not that applying the css rule in the following example works 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 the jsfiddle http://jsfiddle.net/aQ9zM/2/


I finally found the answer:] it it a webview feature that can be disabled calling

setLightTouchEnabled(false)

This should go away if you set those css properties on your elements:

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

Set the following css property: -webkit-tap-highlight-color:rgba(0,0,0,0); This will not cause the problem with the input boxes. But in this case you’ll need access to the HTML code you are running (though you can inject this to the HTML anyway).


Need Your Help

Count total days between current day (SQL)

sql

i'm trying to count the total days between current date and a specific column called "DayConfirm" (datetime). I want to show the total days in a new column beside the rows with "DayChanged" So far ...

Why EntityManager's getDelegate() method does not return EntityManagerImpl as underlying object in Hibernate?

hibernate jpa entitymanager openejb

I am working on a migration of an application from Hibernate/OpenEJB/TomEE to Hibernate/JBoss and I have this exception at runtime: