Sep 22, 2023

Firefox adding unwanted lines to animation

Hi,

Please help. I have this animation, and I am animating a white line going across the screen with translate3d and scale, with text fading in as it goes across.

Everything looks fine, except that Firefox adds these vertical purple lines during the animation. I also noticed that Firefox does this in other animations I make like this. I'm not sure what is causing the buggy vertical lines to appear? It looks fine in Chrome in Safari.

Details

Animation and the Timeline,Mac

Locked

Informational notification.

This question is locked and replying has been disabled.

Community content may not be verified or up-to-date. Learn more.

All Replies (2)

Kent - Google Web Designer

Community Specialist

Sep 22, 2023

Have never seen that before. What is the purple part on the right... is that the background? Could be connected to that. I suspect something related to the construction of the layered elements and just doing the same animation a different way will solve it. If you cannot fix it, share your source files with gwd-support @google.com

Hope that helps,

kent

Google Web Designer team

binaratmaja

Oct 19, 2023

The vertical purple lines that you are seeing in Firefox are likely caused by a bug in Firefox's rendering engine. This bug has been reported by other users and is currently being investigated by the Firefox team.

There are a few things that you can try to work around this bug:

Use a different animation technique. For example, instead of using translate3d and scale to animate the white line, you could use CSS animations.
Use a different browser. If you need to support Firefox, you could try using a different browser, such as Chrome or Safari, to create your animations.
Use a third-party library. There are a number of third-party libraries available that can help you to create animations. These libraries may provide workarounds for the bug in Firefox's rendering engine.

If you are still having trouble with the vertical purple lines, you can report the bug to the Firefox team. To do this, go to the Firefox bug tracker and create a new bug report.

Here are some additional tips for creating animations in Firefox:

Use hardware acceleration. Hardware acceleration can improve the performance of animations in Firefox. To enable hardware acceleration, go to Firefox's preferences and select the Advanced tab. Then, under General, check the box next to Use hardware acceleration when available.
Use CSS animations whenever possible. CSS animations are generally more performant than JavaScript animations.
Avoid using complex animations. Complex animations can be difficult for Firefox to render.
Test your animations in Firefox before deploying them. This will help you to identify any problems with the animations before they are seen by your users.

I hope this information is helpful. Please let me know if you have any other questions.