The scrolling animation:
When you click on an anchor/link to smoothly transition to the anchor on the single page doesn’t work in Safari with BS5 templates.
It instantly just displays the content where the anchor is, instead of smoothly moving down (or up).
With BS4 template all good (but probably using jQuery instead, which I like to avoid).
Tested with Agency template (untouched).
Settings:
Question is…
Is this a Safari thing, or Bootstrap 5 thing or Bootstrap Studio (5.6.4) thing?
Despite this workaround, it’s not working and won’t.
I’ve tried by adding a Custom Code , just after the /body> like shown here:
In a nutshell: <script defer src="https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js"></script>
I’ve tested this Pure Vanilla JS on Safari 9 (El Capitan) and Safari 14 (Catalina) but both fail:
On my mobile (android) and Chrome it functions properly.
Then I found this workaround:
But as you can see in the comments, Safari won’t:
Unfortunately, right now this solution does not provide access to heaven: compatibility with Safari. The only working solution that is simple, is also rather rubbish: jQuery.
Also tried this one:
By adding as Custom Code or Header, but nope: <script src="https://cdn.jsdelivr.net/npm/seamless-scroll-polyfill@1.0.0/dist/es5/seamless.auto-polyfill.min.js" data-seamless></script>
@richards
Thanks for providing a -working- solution!
I’ve tested your example site link and that works on Catalina (Safari 14.1) \o/
I’ll try to implement it asap in my own design.
@richards
I inspected your code script-wise and it seems to be linked to scroll instead of nav-link.
So I copy/pasted your script code, then added scroll to the classes of the nav-link's and it works in Safari too smooth scrolling wise now!