Buggy Sticky element in Safari (Mobile and Desktop)

Community resources Bugs
1

Hello,

As shown in the video below this Sticky element is really buggy on mobile (and some desktop devices). Can I change something to prevent this and still have the sticky element.

Thanks in advance

Video: Sticky element - YouTube

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi Soz!

I fiddled with your site for a bit, I think the issue might be not directly the section with the fixed elements.

On my desktop, Chrome mobile and FF mobile the scrolling was working, I assume you’re using safari on mobile?

Have a look at my video:

There’s an issue with the width of the page, I think this is due to the navbar and the way it’s set up.

Safari always wants special treatment, try fixing the issue first, it might also fix the scrolling problem

3

Hi RDaneelOliwav,

I have narrowed down the problem to safari. Is there any way to optimize for safari (sticky elements, animations etc.). It seems to work on the apple website.

Thanks in advance!

4

Are you using the sticky I side of overflow:auto?

Have a look at this example

5

Thanks for sending the article!
It really helped.

Solution:
Fixed hight of sticky Element.
→ just set the hight to auto and adjusted the hight of the parent element.

1 Like
6

As I saw that you are from Germany I’m going to write you in german:

UnabhÀngig vom bereits gelösten Problem bekomme ich nicht raus, welches Element breiter ist als der Rest der Seite und das im Video (anbei) gezeigte Problem hervorruft.

7

Ich schaue mir das Problem gegen Abend an!

8

Hey,
Wollte mich nur erkundigen, ob du bereits Zeit hattest, dir das anzuschauen.

1 Like
10

Sorry! Ich versuch es heute noch

11

I found potential and some certain issues that cause the unwanted overflow.

First

Remove all shadows from elements that are the very children of the body tag. Some sections and other elements have shadows that spill outside the intended viewport:

image
This was probably accidental, as those will not be seen by the user. Make sure to also check all interactions that set shadows (if you use them)!

Second

Please completely redo your navbar, the current one is not really build well, it still (as you can see in the img above) spills to the right.

You set on some of it’s elements overflow: visible, this will intentionally render the overflow!

Make sure to start those changes on the largest breakpoint that features those affected elements, otherwise you will do them twice or more :slight_smile:

I can’t test my claims, as I would need to publish the site - as WF’s designer does not show the issues!

You may want to consider recreating the interaction (the heavy ones) for the mobile BB’s — as they don’t work as good for them and mobile devices can struggle to display them smoothly!
Simply hide the mobile intended ones on the larger BB’s and vice versa.

I couldn’t find any issues with the Ix2 interactions, but I’d suggest using the animations on the specific sections via the “Element Trigger” and not via the “Page Trigger” if possible.

Let me know if this helps!

12

Hey,

Thanks for your reply!
I tried out using another (simpler and better build) navigation. - That wasn’t the problem.
But I found an element that was overflowing. - When I turned that off the, it worked perfectly.

Concerning the mobile interactions. I posted another thread on this forum specifically addressing the issues I was facing. As you seem to have pretty good expertise with these things you could maybe take a look at it too.

Link to the thread: Background doesn't show on Mobile - #3 by soz

13

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.