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

Stefanowitsch · February 6, 2023

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>

DV-JF · February 7, 2023

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

Stefanowitsch · February 7, 2023

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.

taotoo · February 7, 2023

FYI it works fine for me on my Android phone in both Chrome and Stargon (not sure which engine the latter uses).

elabx · February 7, 2023

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!

Stefanowitsch · February 7, 2023

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.

Chris-PW · February 8, 2023

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

Stefanowitsch · March 21, 2023

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.

bernhard · March 21, 2023

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 ?

Stefanowitsch · March 21, 2023

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.

bernhard · March 22, 2023

@Stefanowitsch you can have a look at this old thread: https://processwire.com/talk/topic/13418-prevent-hover-click-on-multilevel-menu-on-touch-devices/

Maybe some similar approach could serve as a simple fix? Or is that something totally different?

Sign In

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

Recommended Posts

Stefanowitsch

DV-JF

Stefanowitsch

taotoo

elabx

Stefanowitsch

Chris-PW

Stefanowitsch

bernhard

Stefanowitsch

bernhard

Recently Browsing 0 members

Similar Content

[solved] Panic: File-Compiler Log new entries every second

solved Email login – doesn't seem to trigger hooks or session log entries?

Larger files uploads are not compleating

[Solved] Getting Error: Call to a member function render() on string after adding Content-Element

solved ajax, $pages->find, current language results

Browse

Activity

My Activity Streams

Support

Store

My Details