Remove small blue box on svg click within div

Question

This is a problem on a Droid 4 and Samsung Galaxy S2 but has no highlight on newer devices and browsers. This is actually for a Cordova app, but it also fails in the linked fiddle on the device browsers. I've seen many posts on StackOverflow but none of the suggested attributes remove the blue highlight on touchstart. In this case, the light blue hue occurs to the left of the letter. I've tried inspecting with Chrome but no inspect option appears for these devices. The only solution I've seen is overlaying a hidden SVG and having that handle the clicks. I'd rather fix it with CSS or javascript.

Here is the CSS and fiddle that fails on these devices:

       box-shadow: none;
       width: 22%;
       height: 30%;
       position: relative;
       -webkit-user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none;
       -o-user-select: none;
       outline: 0;
       border: none;
       color: rgba(255, 255, 255, 0);

http://jsfiddle.net/softwareinnovator/06wbqer1/6/

You can see the blue box in the first picture but not the second. One partial solution I found is to put the onclick on the div rather than the SVG but then I get a full div highlight on one device. My guess is the wider second letter is pushing it out of view. I've also found that the box does not occur if I do not specify height, width and position.

Blue box

No blue box

Could you provide a screenshot of the blue box, so that we can at least visually grasp your problem? — Seika85, May 06 '16 at 06:49
The second screenshot is the only one that does not see it. My guess is that it relates to the wider viewbox. — MCain, May 06 '16 at 20:39
Since this behavior does not occur in the fiddle for me, and the fiddle is visually different from your screenshots, I assume there are other coherences with your HTML and CSS that are triggering that. So unless you show us the full code in a fiddle, we may not be able to help you. — Seika85, May 09 '16 at 06:14
The current Fiddle demonstrates the issue on the Droid 4 and Samsung Galaxy s2. — MCain, May 09 '16 at 14:50

score 0 · Accepted Answer · edited May 23 '17 at 12:23

0

The Crosswalk plugin fixed the issues. I know this doesn't diagnose the actual cause and solution, but I have to recommend it. This post helped me add it to the project properly.

Build error after adding Crosswalk plugin to a Cordova Android project

edited May 23 '17 at 12:23

Community

1
1

answered May 16 '16 at 18:01

MCain

465
2
12

Remove small blue box on svg click within div

1 Answers1