Android WebView/Browser and Orange Rectangles

Wrote an answer to this on StackOverflow, but thought I should add it here as well.

First: The Problem

Orange rectangles appear when you select a link on a WebView/Browser. This is due to Android Touch Mode. What it basically does is let you know that the link is selected. This is an annoying problem and there are two ways to overcome this issue.

Therefore: The Solution

Two actually in this case:

  1. The Java/Native Approach: Call the webView.setFocusableInTouchMode(false). This only solves it half way and in the WebView where you run your HTML only. Also,  You should take into account though that this solution will make all text input boxes in your webpage unavailable.
  2. The CSS/Web Approach: 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).
That’s it,
Enjoy and till the next post…

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s