All webpage is marked when touching the screen on mobile devices

Question

The Website with the problem: Dentrist.com

The following video explains it all: https://drive.google.com/file/d/0B3I1u2C6pdwmb3lMQ0lkbkZoRGc/view?usp=sharing This same result appears on Android and Apple devices.

I've tried to fix it and find the div which is causing this problem, at least that's what I believed. Thinking that it was a CSS problem. But now I think its caused from the new Polymer (web components) I'm using on the site. Using Debug I found that when pointing on the tag/element "body" or "html" it marks all the screen. One thing to notice is that the selection of any link or text is working perfectly, following the entire page marking for some reason. I don't know how to explain it in other way.

Please help ! Thank you.

I've checked the source, why do you have an ID and a Class with the same name? — Rui Silva, Apr 22 '15 at 15:48
Hi thanks for the response. I checked the similar CSS & ID, but it has nothing to do with the problem (I removed them all and the problem still exists). I tried to remove all CSS & All Javascript but with no luck. I checked each section in the header tag, deleting line by line but still it doesn't seem to fix the problem. Same for the body tags... I just don't know what is the problem ! I cannot figure it out. If you may guide me to a way to detect what causes this effect. Thanks in advance. — MyUserInStackOverflow, Apr 22 '15 at 22:58
One thing I've noticed is that when I remove "wp_head();" it fixed the problem but the page breaks apart. Any idea ?! — MyUserInStackOverflow, Apr 22 '15 at 23:06
Seems like a problem on WordPress's end. I've found Polymer to not work all that well with WordPress. — Kyle Horkley, Apr 23 '15 at 01:52
Then I guess I'll need to contact Wordpress' & Polymer's teams. But before that I will try to update everything on the site.Thanks for the responses. — MyUserInStackOverflow, Apr 23 '15 at 14:40

score 0 · Answer 1 · answered May 09 '15 at 03:12

0

It was a problem with a Wordpress plugin. After update to all plugins, the problem was solved. Although diagnosing it is very hard.

answered May 09 '15 at 03:12

MyUserInStackOverflow

379
2
10

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

I finally discovered the problem. It is caused by the browsers implementing css highlight when pressing on a button or link. The Fix I used for it using css reset to default browser manipulations:

*, *:before, *:after {
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

Source:

All webpage is marked when touching the screen on mobile devices

2 Answers2