Streaming live at 10am (PST)

CSS Sticky custom code not working in safari


#1

Hey all,

I’m playing around with CSS Sticky on my website after watching nelson’s stream of him re-building GoPros landing page…

I was able to achieve the sticky position on my profile image on the website…It works great in chrome and firefox however it does not work in safari…can anyone help?

In nelsons stream he puts the custom code for css sticky in an HTML embed on the site… before I put it in an embed I tried putting it in the head section of the page and wrapped it with style tag and it did not work. Any idea why it only works when you drag an embed to the site?

Lastly,

If you look at the my site in firefox it is very jittery on firefox especially when my profile picture scales large at and fades away…any tips on smoothing out interactions on fire fox?

Thank you!!!


Here is my public share link: https://preview.webflow.com/preview/anthonyportfolio?utm_source=anthonyportfolio&preview=5134e78ead09dd0804ff5addab9a0e16


#2

Hey @anthonymas90, how u doing?

About the “stickyness”, that was just a small typo you can fix easily. According to caniuse.com position: sticky works on Edge, Firefox and Chrome, but you have to use the prefix -webkit- for it to work on Safari, that’s why your code isn’t functioning on this specific browser.

You code was written: -webkit-(space)sticky
Prefixes should be written without spaces: -webkit-sticky

About the Firefox problem, I need more time to figure out why this is happening. I’ll get back to you if I find something.


#3

Hey again, @anthonymas90.

Maybe Firefox is struggling with so much going on at the same time. You are animating Scale, Opacity and – at the same time – your image is a background image set to cover, with position: absolute inside a container with height: 100% of another container that also have it’s height set on 90% viewport height inside even another wrapper with height: 100% that is a Flex Wrapper, inside a Grid :exploding_head:.

I know computers are made to calculate things, but some engines can struggle and drop a lot of frames of the animation. I could be wrong, but I think trimming some markup can correct this jitter on Firefox and also improve the performance on the other browsers as well.

I made this simple example with a similar interaction to test if it was some bug involving the animation on Firefox.

See the live site

See the read-only link

I just used a simple <image>in my grid without any wrappers and it worked perfectly on Firefox.


#4

@gilson Thank you SO much. I really appreciate you taking the time to help me.