[Resolved] Smooth scroll not working on iPad Pro

[Victor]

…oops, shared it publicly

[Victor]

Here’s the test of your scrolling page on my iPad.

[Victor]

…the old Elementor Pro version of my site still working like it should with scrolling and all @ https://www.victorvandijk.nl

[Fernando]

Was Mike using the same iPad version with the same iOS version as you?

As we can’t replicate the issue from our end, it’s highly difficult to pinpoint the exact cause of the issue. Not sure if it’s device isolated or specific to version 15.7.

I was able to test on an iPhone 14 – iOS version 16.0, and I didn’t experience the issue there on your website.

At the moment, the best thing to do is to be able to test your site on an iPad with the exact same settings as yours. Alternatively, you can try to update your iPad if there’s an update, and recheck afterwards.

[Victor]

Hi Fernando,

I’m onto this issue with Mike, he especially updated to the same version (with exactly the same make iPad) as I’m running. Mike asked me to check my GP settings, an I’ll do that this afternoon (Central European Time).
Of cours, I’ll let you know the results as well.

Have a great day!

Best from Victor.

[Victor]

….perhaps a silly thought / question that just came to mind,

At what places would it be possible to apply the smooth-scroll class?
‘Just’ onto Anchor Tags, or perhaps other places as well?

I absolutely do not understand why this smooth-scroll class does NOT work, but ONLY NOT on MY iPad?!!

[David]

The smooth-scroll class has to be applied to a link, or we can use code so as all links with or without that class would trigger the event.

And i am not sure changing that behaviour would make any difference.

Considering that iOS just implemented CSS smooth scroll, i wonder if that would work.
If you want to try that then disable the Smooth Scroll option in GP, and add this CSS to your site:

html {
  scroll-behavior: smooth;
}

Does that work ?

[Victor]

You’re nothing short of AMAZING!! At least, it now works on my desktop browser AND on my iPad one! Let me check my other browsers as well….

[Victor]

….and does this still work on YOUR iPad(s) AND Mac/Windows Desktops?

[Victor]

….DuckDuckGo App on my iPad: WORKS!!
….SAFARI App on my iPad: WORKS!!

Only Thing I just discovered, the ‘white on black UP-Arrow’ works but scrolls one line by one line at a time now, incredibly SLOW, that is!

[Victor]

….Chrome on iPad: WORKS!!

[David]

Works fine on my end too.
Issue is, it will conflict with the Back To Top scrolling JS.
So we need to find an alternative to that.

Quick question – was the Back To Top working ok when the link smooths scroll feature was enabled in the theme ?

[Victor]

Hi David,

I’m happy to read that it all works fine on your end too 🙂 !

And YES, the up-arrow worked like a champ in the ‘old situation’, with Smooth Scrolling still checked.

* Just anothef idea, could it have to do with some Perfmatters settings as well? I <3 Perfmatters, but some settings might throw regular working off?

[David]

Its odd how the back to top smooth scroll worked and the link smooth scroll did not/
But its also odd that we can’t replicate it elsewhere….

Ok, if you’re happy using the scroll-behaviour CSS

then lets fix the Back to top.

1. Disable the Back to Top option in Customizer > Layout > Footer

2. Add this PHP Snippet to your site:

add_action('generate_after_footer', function() {
	printf(
		'<a title="%1$s" aria-label="%1$s" rel="nofollow" href="#" class="generate-back-to-top">
					%2$s
				</a>',
		esc_attr__( 'Scroll back to top', 'generatepress' ),
		generate_get_svg_icon( 'arrow-up' )
	);
});

3. Add this CSS to your site:

.generate-back-to-top {
  --btt-offset: 600px; 
  position: sticky;
  bottom: 20px;
  left: calc( 100vw - 60px );
  margin-top: calc(100vh + var(--btt-offset));
  padding: 10px;
}

[Victor]

Again, you’re fantastic!!
This totally WORKS!!

Thank you so much!

Maybe – although up until now, I’ve been the only one with this very strange problem – this inspires you to ‘knit’ it into a next GP version?

Again, thanks!!

Best regards from Victor.

[Author]

Posts