Need help with a weird overflow

I Need Help
1

Can anyone see the same as I do?
On safari (only on safari, and only on desktop browser) I see an overflow-x on this page

Note that overflow-x is explicitly hidden on the body tag!

Now, the very weird thing is it does not happen always.
Sometimes, there is no overflow, sometimes just a few cm, sometimes a lot.

I thought I narrowed it down to the div#tkt-contractor by deleting nodes one by one, but it’s inconsistent - sometimes the overflow even happens when I delete that node! And then sometimes even leaving the node the overflow doesn’t happen. A real witchcraft :rofl:

What is even more confusing is when I delete the first style tag in the head (loading fonts) the overflow diminishes by ca 50% but isn’t fully gone. A style tag loading a font really shouldn’t affect overflows, as far I know?
Never seen something like this in my life… usually overflows can be hard but I always spotted the overflowing element with either deleting nodes or

var docWidth = document.documentElement.offsetWidth;

[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

Not this one.
I hope someone can see what I cannot see…

Thank you!

2

Narrowed it down to (any of) the FX Scroll in or fade in on the blocs app itself where I can replicate the issue.

Not yet sure which one of the FXs or containers is the culprit, also checked the site from this post Blocs website - my first project which does not have the issue, so it must be something I am doing wrong, or a mix of settings… will update when I find out more.

3

OK found it.

To make a sticky top sidebar on several pages I needed to overflow:visible on the parent elements of that sticky positioned item, because otherwise the sticky rule won’t work.

Now, I still hid overflow-x:hidden but on the parent element of the overflow:visible, so the overflow-x:hidden got effectively overwritten by that later rule.
So that is why the hidden didn’t apply on homepage where I have FX

However adding any form of overflow:NOT VISIBLE rule not matter wether to x or y on the parents, will immediately break sticky positioning of any child, no matter what.

This may or may not be a quirk or perhaps there are ways of applying sticky positioning even if having overflows hidden, but I simply solved it by applying the overflow visible to all pages unless the one with FXs (which luckily is only the homepage, where luckily I do not have sticky positioned elements), easy enough with a :not css selector

What is the weirdset of all is that the issue happens only in safari. So it might be something related to how Safari handles overflow rules… anywawy problem solved