InTheOne Posted December 31, 2019 Share Posted December 31, 2019 On Firefox my fancy cat walk does not work at all on my website: https://phpstack-74099-1024495.cloudwaysapps.com/ On Codepen it works jankely. How can I get this sweetness working on Firefox? See the Pen dyPVdjr by jonroc (@jonroc) on CodePen Link to comment Share on other sites More sharing options...
elegantseagulls Posted January 1, 2020 Share Posted January 1, 2020 Hi @InTheOne, Browsers don't like it when you change the source of an image, as it has to check/repaint the entire image, which is likely the cause of issue in FF. To eliminate this, I would load all your images to the dom and use your tween display/hide them with opacity/visibility (autoAlpha), or better, yet, stitch the images together as a sprite sheet, and tween between them via transform, using a stepped ease, (hardware accelerated) in an overflow hidden div (similar to this example: See the Pen MBWqYX by elegantseagulls (@elegantseagulls) on CodePen ). 5 Link to comment Share on other sites More sharing options...
InTheOne Posted January 7, 2020 Author Share Posted January 7, 2020 That is great! I'm including my new Pen in case anyone else wants to do a simpler version of the airplane CSS sprite. See the Pen BayYKYM by jonroc (@jonroc) on CodePen 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now