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?
About the “stickyness”, that was just a small typo you can fix easily. According to caniuse.composition: 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.
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 .
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.
.