Canvas Support

iOS Double Tap Bug

3 replies·opened Oct 20, 2020
R
RonOct 20, 2020

Please provide the code adjustments required to fix the double tap bug on iOS.

Reference:

Hello,

Thanks for your Comment.

This actually is not a bug but the Default Behavior of Hover Elements on iOS Devices. This can be disabled easily by adding 2 Lines of Code in the JS Files. So the Hover effects remain intact on Desktops but disable on Touch Devices and do not require Double Taps. We will release an update soon with an option to enable this if the user needs it.

Meanwhile, you can simply visit our Support Forums and Open a Support Ticket and Our Support Team will provide you with the codes shortly.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues. Thanks. :)

S
SemiColonWebSTAFFOct 21, 2020

Hello,

Please find the following code in the js/plugins.hoveranimation.js File:

if( $hoverAnimationEl.length < 1 ){
	return true;
}

and add the following line of code just after the above codes:

if( $('body').hasClass( 'device-touch' ) ){
	return true;
}

This will disable this functionality on Mobile Devices. Hope this Helps!

If you are using the js/plugins.js or the js/plugins.min.js File, you will need to Update the above codes in these Files as well.

Let us know if we can help you with anything else or if you find any further issues.

R
RonOct 21, 2020

Hello,

This worked for the call to action banner at the bottom of some pages, but it did not work for the video overlay element. The video content with the "play" button requiring a tap to view the video still takes two taps on mobile.

You can test here:

http://justshare.ronkh.com/

Code is applied and all pages use the plugin.js for simplified testing.

http://justshare.ronkh.com/assets/js/plugins.js

It did fix the blue banner at the bottom, but not the video player in the middle of the page. It seems to work sometimes when I tap elsewhere on the page, but it doesn't always work when the first tapped element is the video player.

S
SemiColonWebSTAFFOct 21, 2020

Hello,

We have thoroughly checked this out on your Website and we think that the .op-ts, .op-07, and the .animated Classes are causing this. These Classes might be picking up the Default Behavior of the Touch Devices. Additionally, this could also be because of the data-lightbox Attached to the <a> tag for the Video which opens the Lightbox on Desktops and directly on Mobile Devices. There are no other Hover Events attached to this Element and this is something that appears to be controlled by the Browser.

In this scenario, we recommend setting up a Duplicate Item without any Lightboxes and Hovers and then use the Bootstrap Display Utilities: https://getbootstrap.com/docs/4.5/utilities/display/ to Hide/Show them on the Devices according to your requirements. Example:

<a class="d-none d-md-block position-relative" href="https://www.youtube.com/watch?v=7d1UswEQqwg" data-lightbox="iframe">
    <img src="/assets/images/backgrounds/roof-hammer.jpg" alt="Example Video">
    <div class="bg-overlay">
        <div class="bg-overlay-content dark">
            <span class="overlay-trigger-icon size-lg op-ts bg-light text-dark animated op-07" data-hover-animate="op-1" data-hover-animate-out="op-07" data-hover-parent=".row" style="animation-duration: 600ms;"><i class="icon-line-play"></i></span>
        </div>
    </div>
</a>
<a class="d-block d-md-none position-relative" href="https://www.youtube.com/watch?v=7d1UswEQqwg">
    <img src="/assets/images/backgrounds/roof-hammer.jpg" alt="Example Video">
    <div class="bg-overlay">
        <div class="bg-overlay-content dark">
            <span class="overlay-trigger-icon size-lg bg-light text-dark"><i class="icon-line-play"></i></span>
        </div>
    </div>
</a>

Consider trying this out and let us know if this works for you.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard