Jump to content

UIKit experts here? Why is height-viewport Slideshow + Scrollspy preventing click events?

Stefanowitsch

By Stefanowitsch,
in Dev Talk

 Share

Recommended Posts

Stefanowitsch Sr. Member

Stefanowitsch

Posted
Posted

I ran over a bug (?) that kind of freaks me out. It's this kind of problem that seems to occur without any reason. But let me explain:

I have a project that is using the latest UIKit 3 library. On the homepage I make use of a slideshow component which is also configured to take space of the entire viewport height (via: uk-height-viewport).

The other content elements are introduced by using the Scrollspy component when scrolling down.

I was wondering why no link is working (even javascript on click events on anything on the page). Instead the "first" click only triggers the hover state of the link/button. Then the second click triggers the link event. This only occurs on mobile devices (like my iPhone).

The only solution to make links work in the first place is to get rid of the uk-height-viewport attribute of the slideshow. OR to get rid of all the Scrollspy instances. This makes no sense to me.

I made a small demo site where I can exactly reproduce this phenomenon. So it seems to have nothing to to with my project code but is in fact a kind of UIKit bug (?).

Please have a look:

http://uikit.thumann-preview.de/

1. Open the page on a mobile device 
2. Scroll down to the red button
3. Tap on the button. Nothing happens but the hover state is activated.
4. Tap again on the button. The link is working.

I also made a short video that shows the problem:

 

Here's the code of this test page: 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CDN Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.15.11/js/uikit.min.js"
        integrity="sha512-uNdy6/b4kpAKQgC1MqDRW7HzGqmja6jPPfQ0Pv3q4f0r5XpL4cxPlgqgSbFT5pnLFo4BSFZX8Ve/ak0DDN06OA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.15.11/css/uikit-core-rtl.min.css"
        integrity="sha512-+6D4TOLdOBhkuufbELpbCiGmD+Y4dzrNbSPGwtgGO2nf7Id3dM0x5R/Cw0bI/13pFUnsRL8pfpmKNWLbAx8fGg=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.15.11/css/uikit-core.min.css"
        integrity="sha512-Up68klxaLGLgBXFtu9KAkcM0/b1Vv97wru/VabGokNEwbQN1RBjBtthqDgildf/8YCOKaaLvT5ZfIvVPom5dIw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.15.11/js/uikit-icons.min.js"
        integrity="sha512-Rrh7aqdTz7Q1BPfCdWCK3poag9FNK1HQJMbSdL/eRZwXkbS1EWlY5n2XJ70ZVh1ZLRIJEUoWxATps1cyzpGp/g=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <style>
        body {
            max-width: 90%;
            margin: auto;
            background-color: rgb(227, 227, 227);
        }

        footer {
            padding: 10px;
            background-color: cornflowerblue;
            padding-top: 20px;
        }
    </style>
</head>

<body>

    <header>
        <nav class="uk-navbar-container" uk-navbar style="background-color: cornflowerblue;">
            <div class="uk-navbar-right">

                <ul class="uk-navbar-nav">
                    <li class="uk-active"><a href="#" style="color: white">Home</a></li>
                    <li>
                        <a href="#" style="color: white">Account</a>
                        <div class="uk-navbar-dropdown">
                            <ul class="uk-nav uk-navbar-dropdown-nav">
                                <li class="uk-active"><a href="#">Login</a></li>
                                <li><a href="#">Sign Up</a></li>
                                <li><a href="#">Report</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#" style="color: white">Item</a></li>
                </ul>

            </div>
        </nav>
    </header>


    <!-- Slider  -->

    <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="ratio: false">

        <ul class="uk-slideshow-items" uk-height-viewport>
            <li>
                <img src="https://picsum.photos/200/400" alt="" uk-cover>
            </li>
        </ul>

        <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous
            uk-slideshow-item="previous"></a>
        <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next
            uk-slideshow-item="next"></a>

    </div>

    <!-- Cenetred Text -->
    <h1 class="uk-text-primary uk-text-center">This is awesome</h1>

    <!-- Adding card -->
    <div class="uk-child-width-1-3@m uk-grid-small uk-grid-match" uk-grid uk-scrollspy="cls: uk-animation-slide-bottom">
        <div>
            <div class="uk-card uk-card-primary uk-card-body">
                <h3 class="uk-card-title">Card1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-warning uk-card-body">
                <h3 class="uk-card-title">Card 2</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
        </div>

        <div>
            <div class="uk-card uk-card-secondary uk-card-body">
                <h3 class="uk-card-title">Card 3</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
        </div>
    </div>


    <div class="uk-child-width-1-3@m uk-grid-small uk-grid-match" uk-grid uk-scrollspy="cls: uk-animation-slide-bottom">

        <div>
            <div class="uk-card uk-card-warning uk-card-body">
                <h3 class="uk-card-title">Card 4</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
        </div>

        <div>
            <div class="uk-card uk-card-secondary uk-card-body">
                <h3 class="uk-card-title">Card5</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-primary uk-card-body">
                <h3 class="uk-card-title">Card 6</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
        </div>
    </div>


    <a href="https://www.google.de" class="uk-button uk-button-danger uk-margin">I AM NOT WORKING :-(</a>

    <!-- Card with images -->

    <div class="uk-child-width-1-2@m" uk-grid uk-scrollspy="cls: uk-animation-slide-bottom">
        <div>
            <div class="uk-card uk-card-default">
                <div class="uk-card-media-top">
                    <img src="/slides/slide3.png" width="1800" height="1200" alt="">
                </div>
                <div class="uk-card-body">
                    <h3 class="uk-card-title">Human</h3>
                    <p>An average of 20 times every minute, your eyes blink. The tongue has roughly 8,000 taste buds,
                        each of which can have up to 100 cells. In reality, earwax is a form of sweat.</p>
                </div>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default">
                <div class="uk-card-body">
                    <h3 class="uk-card-title">Cat</h3>
                    <p>Cats have a 6-times-their-height jump capacity. The average cat snoozes for 13 to 16 hours every
                        day (roughly 70% of their life). A cat's lifespan is equivalent to 15 years in a person's life.
                        A Maine Coon is one of the largest domestic cat breeds.</p>
                </div>
                <div class="uk-card-media-bottom">
                    <img src="/slides//slide4.png" width="1800" height="1200" alt="">
                </div>
            </div>
        </div>
    </div>
    <br>
    <br>

</body>


</html>

 

Link to comment
Share on other sites
Stefanowitsch Sr. Member

Stefanowitsch

Posted
  • Author
Posted
33 minutes ago, DV-JF said:

Short reply: On my Pixel 6a with latest Android the link is working as expected in Firefox as well as in Chrome browser. 

Maybe you could ask here: https://discord.com/invite/NEt4Pv7

Thanks for testing! I only have my iPhone for testing and there the behaviour is identical in safari + chrome.

I asked the same question on the UIKit discord channel yesterday. Which is a bit new for me - describing such a complicated thing in a chat room environment. Maybe they have an explanation.

Link to comment
Share on other sites
elabx Hero Member

elabx

Posted
Posted

I can click the button just fine on android Chrome,  but can also confirm you are not going crazy I tested in my wife's phone which is an iphone and I can replicate the behaviour! It takes too taps to click the button!

  • Like 1
Link to comment
Share on other sites
Stefanowitsch Sr. Member

Stefanowitsch

Posted
  • Author
Posted
24 minutes ago, elabx said:

I can click the button just fine on android Chrome,  but can also confirm you are not going crazy I tested in my wife's phone which is an iphone and I can replicate the behaviour! It takes too taps to click the button!

Thank you! I found an old amazon tablet here (android) and there the button click events are working fine too. This looks more and more like an iPhone bug.

Link to comment
Share on other sites
Chris-PW Jr. Member

Chris-PW

Posted
Posted

Hello,
I just tested it with the iPhone and the latest ios. For me, the switches work when reloading.
(The problem may also be due to the missing certificate https and JS browser security. You also have mixed content http/https on the page, so there may be a delay. Just a guess... )

Greetings

  • Like 1
Link to comment
Share on other sites
  • 1 month later...
Stefanowitsch Sr. Member

Stefanowitsch

Posted
  • Author
Posted

If anyone is looking for a workaround: 

Using JS fastclick solves this issue for me.

This seems to be an iOS related problem. If you google for "iOS double tap link issue" you'll find plenty of threads. Mostly they have to do with CSS hover pseudo elements but this was not the case here.

  • Like 1
Link to comment
Share on other sites
bernhard Hero Member

bernhard

Posted
Posted

Thx for reporting back @Stefanowitsch

It sounds like this might be a feature (snippet) that we could add to rockfrontend? How does that fastclick work or what does it do?

Quote

Note: As of late 2015 most mobile browsers - notably Chrome and Safari - no longer have a 300ms touch delay, so fastclick offers no benefit on newer browsers, and risks introducing bugs into your application. Consider carefully whether you really need to use it.

Not sure if I'd feel good using this script on one of my websites 😄 

Link to comment
Share on other sites
Stefanowitsch Sr. Member

Stefanowitsch

Posted
  • Author
Posted
1 hour ago, bernhard said:

Thx for reporting back @Stefanowitsch

It sounds like this might be a feature (snippet) that we could add to rockfrontend? How does that fastclick work or what does it do?

Not sure if I'd feel good using this script on one of my websites 😄 

Yes I have to observe it some new bugs will appear. I don't even know why fastclick solves this issue, maybe it would be enough to find out that little piece of code inside this library that does the trick and just extract hat.

Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...