My jQuery toggleclass function is creating a hyperlink effect on touchscreen devices

Question

I have used jQuery to add a css transition effect when the mouse hovers over the header of my site, causing it to turn from transparent to a white background. I'm having a really strange and unexpected problem on touchscreen devices when adding the additional class (.active).

I can only assume this happens on all touchscreen devices, as I only have my iPhone to test it with, but when I tap my thumb on the header, the whole header is covered in a dark rectangle (as if it were a hyperlink that had just been clicked).

Not only does this look very strange, it is ruining the functionality of the website because I can no longer tap the logo/home link or the button within the header.

I have tried various CSS rules inside a media query to stop this, including setting the .active class to display:none and pointer-events:none, but nothing has been able to fix it.

UPDATE

Here is my actual website code. There's a lot here, but I can't seem to replicate this properly in a JSFiddle.

HTML:

<header class="header">
    <div class="header-container">
        <h5 class="logo" id="lucieaverill">LUCIE AVERILL</h5>
        <h5 class="logo" id="photography">PHOTOGRAPHY</h5>
    <div class="mobile-menu">
</header>

CSS:

.header {
    width: 100%;
    height: 100px;

    position:absolute;
    top:0;
    z-index:2;

    transition: all 0.4s;

    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}


.header.active {
    background-color:#fff;
}

.header-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

    justify-content: space-between;
    -webkit-justify-content: space-between;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;

    height:inherit;
    width:85%;
    max-width:1600px;
    overflow:hidden;
}

a.logo {
    height:15px;
    font-family: ProximaNovaW01-Bold, Arial, Helvetica, sans-serif;
    font-size:19px;
}

h5.logo#lucieaverill {
    color:#ffffff !important;
    transition: all 0.4s;
}

h5.logo#photography { 
    color:#ffffff !important;
    transition: all 0.6s;
}

h5.logo#lucieaverill.active {
    color:#3a3a3a !important;   
}

h5.logo#photography.active {
    color:#b2b3b3 !important;
    transition: all 0.3s;
}

Javascript:

jQuery(document).ready(function($){    

$(".header").hover(function(){
        $(".header, h5.logo#lucieaverill, h5.logo#photography").addClass("active");
    }, function(){  // Callback
        $(".header, h5.logo#lucieaverill, h5.logo#photography").removeClass("active");
    });
});

I tryed your fiddle on a Samsung Galaxy S3... And it works as expected... Exactly the same has on my pc. — Louys Patrice Bessette, May 28 '16 at 22:56
Have you checked this answer? http://stackoverflow.com/a/2891155/6022243 — Roy, May 28 '16 at 23:01
That's really strange, I wonder why my iphone isn't doing the same.. Could you do me a favour and try it on my actual website? The link is www.lucieaverillphotography.co.uk/home – At the moment I'm unable to click the menu icon. — Jack Averill, May 28 '16 at 23:03
Hi Roy, thanks for your comment. I should have made it more clear in my question that I'm not trying to achieve the same effect when viewing on a mobile. I'm more concerned with removing the `.active` class altogether, which is proving difficult for some reason, even with `display:none` — Jack Averill, May 28 '16 at 23:06
It is very common behaviour but not All Mobile browser (versions) have the issue. Chrome's dev toolkit Mobile test setup had this behaviour in my app this afternoon, I fixed it with the answer provided in the other comment. — Randy, May 28 '16 at 23:08
On your site, on Galaxy S3, the background doesn't change colors and I see a small blue box over "Lucie Averill". If I hold it, the header dissapears. I'm using Chrome-mobile... — Louys Patrice Bessette, May 28 '16 at 23:08
Jquery has a method to get viewport width, try to set `.active` only on bigger screens? — Randy, May 28 '16 at 23:09
I took a [screen shot](http://i1208.photobucket.com/albums/cc370/Bes7weB/shot_2016-05-28_19-14-54_zpsa2mv8kjh.png)... May help! Add it to you question. — Louys Patrice Bessette, May 28 '16 at 23:19
I suggest you Edit your question and show more relevant code of your site, instead of your fiddle that doesn't behave the same... On Galaxy S3/Chrome-mobile. — Louys Patrice Bessette, May 28 '16 at 23:23
Ah yeah I see what you mean, that's the 'home' hyperlink for the logo, but I haven't set the font to the correct size yet so there's a line-break. I've just tried it in chrome and the menu works, but that annoying grey box is still present when holding the header. — Jack Averill, May 28 '16 at 23:24
Now... I still see the blue rectangle. But on touch-end, the back-ground turns white. I can see it only one second... Then the whole page is white (no text). — Louys Patrice Bessette, May 28 '16 at 23:38
Trying to reload the page fails... Site is all white (but ok on pc). — Louys Patrice Bessette, May 28 '16 at 23:41
I think that's because I've mistakenly set the link to a dead page, sorry about that, I didn't mean to confuse things. I'm about to update the question with my actual website code, and I'll see if I can upload a screenshot of whats happening my end — Jack Averill, May 28 '16 at 23:41
I made a fiddle out with your code update. Notice that I setted the body `background-color` to black... So we can see something. I also added some missing ``s. [Fiddle here](https://jsfiddle.net/Bes7weB/ah5qhtye/) — Louys Patrice Bessette, May 29 '16 at 00:13
And the fiddle STILL work as expected on Chrome-mobile: [screenshot](http://i1208.photobucket.com/albums/cc370/Bes7weB/shot_2016-05-28_20-17-27_zpskxx03ruy.png). — Louys Patrice Bessette, May 29 '16 at 00:21
There is sitll a problem. And maybe a bigger one now. I just can't get back to your site since I clicked on this hidden dead link... White page. I thought you used a session var... So I closed my 25 tabs (!) to completely close the browser... But No. Just can't get back to your site. EVEN with another browser (FF) on pc... So it is not a cookie either. — Louys Patrice Bessette, May 29 '16 at 00:34
Not sure why that could be, but try it now - I've updated the homepage to the original page I sent you. The reason I set a blank page was to stop people stumbling across the website as I've been working on it while it's live. — Jack Averill, May 29 '16 at 00:44
Look's to be working both on Chrome, Firefox and Chrome-mobile now. ;) Edit an answer with what you've done and green mark it. It will prevent people from losing their time trying to answer you. — Louys Patrice Bessette, May 29 '16 at 06:18
Hi Louys, the problem is still occurring on my end unfortunately. All I did was change the home page from a blank page to a working page. If I press and hold anywhere on the header that isn't the logo or the menu button, it still covers the header with a grey box as if I were pressing a hyperlink. Here's a [screenshot](https://i.imgsafe.org/ab1d438ea5.png) of what I mean. Compare it to what it looks like [without](https://i.imgsafe.org/ab1f02eadd.png), it's difficult to see, but you may notice the line at the bottom of the div, and that the white text is darker from being covered over. — Jack Averill, May 29 '16 at 09:15
[Here is a more visible example](https://i.imgsafe.org/ab3b82da1b.png) of what I mean by the grey box over links when pressed. I think this may be specific to IOS on iPhones. I might have to look into a way to disable the `.active`class on touch screen devices with jQuery, because if I give it a `display:none` in my stylesheet, it still acts like a hyperlink but the logo and menu button stop working when pressed. — Jack Averill, May 29 '16 at 09:18
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/113270/discussion-between-louys-patrice-bessette-and-jack1991). — Louys Patrice Bessette, May 29 '16 at 21:45
Hi louys, sorry I've just seen your comment. I've been without an Internet connection. The past couple of days. I'll try out that jquery when I get home. Thanks :) — Jack Averill, May 30 '16 at 17:14

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

Since it seems that the .active class don't apply only on iPhones.
(See comments below the question).
Your browser is probably Safari.

I found this SO answer that may solve your problem. Here is how to implement it:

jQuery(document).ready(function($){    

$(".header").hover(function(){
        $(".header, h5.logo#lucieaverill, h5.logo#photography").addClass("active");
            // Forces Safari to redraw
        $("body").addClass("dummyClass").removeClass("dummyClass");

    }, function(){  // Callback
        $(".header, h5.logo#lucieaverill, h5.logo#photography").removeClass("active");
            // Forces Safari to redraw
        $("body").addClass("dummyClass").removeClass("dummyClass");
    });
});

Why does it forces Safari to redraw isn't explained...
But it look's like a working walk-around for this browser specific bug.

My jQuery toggleclass function is creating a hyperlink effect on touchscreen devices

1 Answers1

Linked