Position: fixed is not working as expected
I'm trying to recreate this animation.
when hovered on triggered element, I'm switching between
display: hidden; to display: grid; for the video element.
I've given it, position: fixed with full height and width. but it's behaving like absolute.
Please help, not able to understand what is going wrong here.
Video recording: https://www.awesomescreenshot.com/video/37580785?key=ede55ac07584986375a5a105bbb00eeb
My version: https://jacob-turner.webflow.io/index-page
Original Version: https://jacob-turner.framer.website/index4 Replies
If you don't add these styles to the parent the video/images are being placed as you would expect with "fixed".
There is too much going on in the code for me to be able to debug it further right now (though knowing me I will keep at it).
I am not sure what those styles are actually supposed to be adding to the effect as they all appear to have default values - could you try without them?
they seem to be some odd way to force gpu rendering for the element
about 10 years ago, it was common to use
translatez(0px) to swap the rendering from the weak cpu to the stronger gpu
that looks like a strange version of that
i admit: it's 200% likely im wrong@here
Added these properties but no luck.
Explained the structure of the html here
https://www.awesomescreenshot.com/video/37626830?key=7cdbc4f4ec65b8f5cb74d61c832d3a81
My suggestion was that you remove those properties, not add anything
... transform creates a new local coordinate system, as per W3C spec: In the HTML namespace, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants. This means that fixed positioning becomes fixed to the transformed element, rather than the viewport.https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children In summary, you need to not use "transform" on the parent for the child element (the video in your case) to be fixed relative to the viewport.