Scrolling transition not working with Safari / BS5

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:
image

Question is…
Is this a Safari thing, or Bootstrap 5 thing or Bootstrap Studio (5.6.4) thing?

I would think that bs5 uses css for smooth scroll (scroll-behavior: smooth) which safari doesn’t support.

There is a smooth scroll polyfill that you can use:

Hope this helps

Thanks @richards

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>

Does this work for you?

https://smooth.bss.design/

The only version of safari I have is an old version on an ipad, which works ok

@richards That one works for me on my Mac with Safari if that counts. :slight_smile:

Thanks @jo-r

@ferdesign to get this to work add the iamdustan/smoothscroll as an external .js file

I used this:
https://cdnjs.cloudflare.com/ajax/libs/iamdustan-smoothscroll/0.4.0/smoothscroll.min.js

And then add this :

(function() {
scrollTo();
})();

function scrollTo() {
const links = document.querySelectorAll(’.nav-link’);
links.forEach(each => (each.onclick = scrollAnchors));
}

function scrollAnchors(e, respond = null) {
const distanceToTop = el => Math.floor(el.getBoundingClientRect().top);
e.preventDefault();
var targetID = (respond) ? respond.getAttribute(‘href’) : this.getAttribute(‘href’);
const targetAnchor = document.querySelector(targetID);
if (!targetAnchor) return;
const originalTop = distanceToTop(targetAnchor);
window.scrollBy({ top: originalTop, left: 0, behavior: ‘smooth’ });
const checkIfDone = setInterval(function() {
const atBottom = window.innerHeight + window.pageYOffset >= document.body.offsetHeight - 2;
if (distanceToTop(targetAnchor) === 0 || atBottom) {
targetAnchor.tabIndex = ‘-1’;
targetAnchor.focus();
window.history.pushState(’’, ‘’, targetID);
clearInterval(checkIfDone);
}
}, 100);
}

@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.

Thanks again for not giving up :sweat_smile:

1 Like

I’ve tried to replicate your example.

  1. Added external JS by right-clicking in Design panel > Javascript > Link external JS > pasted the link https://cdnjs.cloudflare.com/ajax/libs/iamdustan-smoothscroll/0.4.0/smoothscroll.min.js
  2. Then made a new script.js and added the code from above.
  3. Then added a navbar and some dummy content.

Despite with no luck of a smooth working scrollbar in Safari.

Can you check if you forgot to mention some step or I’m doing something wrong in the BSS file?
See: Navlink.bsdesign - Google Drive

In the sixth line of the JS Code
const links = document.querySelectorAll(’.nav-link’);

The script searches for each link with a class of .nav-link

Make sure you have this class on your links, or changes the js to match the links

@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!

See: https://onetagger.github.io/

Glad you got it sorted. And the site looks great

1 Like