Site breaking on safari & firefox

Design help General
1

Hey, so I just posted my site a couple days ago and have been looking it over on other devices and browsers then what I use to make sure everything is alright. I found though on my CMS projects template page the sidebar navigation moves when scrolling (which is not what I want).

Maybe it could it have something to do with the position ‘Sticky’? The only problem with that is all my other position 'sticky’s seem to work elsewhere on the site.

It’s also a complete mess on internet explorer, but I am less concerned about that. This issue is not present on chrome. Can anyone help determine whats going on?

Here is my site Read-Only: LINK
video link: LINK

2

any clues? I’m still baffled as to whats going on

3

Can you post a .webflow.io link so we can access the site outside of the designer?

I’m noticing a few issues in firefox with sticky. Each section takes a massive amount of scrolling to transition.

4

@Rummy https://rbd-media.webflow.io/

5

I’ve gotta say im stumped. Have you had these issues when you remove interactions from the site?

Have you tried recreating the page in its simplest form? any issues then?

6

@Rummy thats literally what I am attempting right now. Im trying to rebuild them using Grid columns holding the divs as wrappers, then reincorporating the components.

Beyond that Im trying to figure out how to get it working in mobile since all of my words are in the left column and all my images in the right. So in mobile it would then go to all the text, followed by all the images. I’m guessing I may just have to make a separate simplified mobile section

7

Hey, I’m sorry to say I dont have a solution but I do really like the site. Can you tell me how you got the scrolling to sort of do a hard stop at each section? and then requiring more scrolling before moving down further and stopping at each point? thanks @Maydris

8

@AlexanderBiglane those sections are using position sticky ( the thing I suspect may be breaking it)
Its one of the options available like setting something to be static, absolute or fixed. The trick is you have to set a distance of where you want to lock in place (even if its at 0px) it cant remain auto. Past that the element needs space to move into. In my case I have divs in columned div containers set to 300vh. Meaning you you have to transition 3 screens hight before the element comes in contact with the containers base where it ceases to move and is pulled up by scrolling into the next thing.

9

@Rummy @AlexanderBiglane I think I resolved the issue. Its always a small dumb detail. Thanks @AlexanderBiglane, your question and thinking through it helped me to think of where the problem was originating from.

The left column on the project pages were set to fixed to not move while the right side scrolled. but its orientation was not defined (I have now set it to the top left corner). Chrome apparently didn’t care as much as Safari or firefox.

if you can confirm that its not occurring anymore it would be appreciated!

10

Working on my devices! Nice work mate :rocket:

1 Like
11

@Maydris Thanks for the explanation! and I’m glad my question could help you out haha.

1 Like