CSS Parallax working beautifully in Chrome but not Firefox
You can checkout http://caniuse.com it shows you what every browser supports or not. Every browsers is different as you know, there might be elements on Edge and FF that might not be supported like they are on Chrome.
Cropped 3D CSS elements in Chrome or no 3D at all in Firefox
I was able to fix this by creating separated containers with their own perspective for each parallax scene, instead of having them all under the states div with a single control.
So basically instead of:
/* on 'body' mousemove change '.states' perspective-origin */
Now I'm doing:
/* on 'body' mousemove change '.current.state .parallax' perspective-origin */
And it works for Chrome and Firefox, without cropping. Of course, the .state { transform-style: preserve-3d; } was not needed at all.
Related Topics
Why an Inline-Block Container Doesn't Collapse When Contains Only Floated Items
CSS Drop Down Navigation, 3Rd Level Issue
What's the Best Way to Test Cross-Browser Compatibility
Css: How to Select Data Value Greater Than
Ie Flexible Box Model Not Working
Adding an Arrow on Both Sides of a Div Using CSS
How to Center One of the Flex/Grid Children(More Than Three) and with Different Widths
How to Set a Rotation Point for an Element in CSS
Default CSS Overriding Media Query
CSS - Calc() on Font-Size - Changing Font Size Based on Container Size
Box-Shadow Not Shown on Safari Mobile on iOS 7 (In Landscape)
How to Connect a CSS Animation's End to the Beginning So It Smoothly Continues
Transform-Origin Not Working in Firefox Even Properties in Percentage Value
What Is the Math Behind -Webkit-Perspective