Jump to content
Search Community

heads up: likely ffox bug

sitherikb test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Distilled this bug so far I even removed greensock.

Seems to be a firefox bug with repainting transformed elements when you modify backgroundPosition.

Desperate to find a way to force a repaint; jiggling the window will most times force a repaint of the element.  Any ideas?

Filed this:



See the Pen YyMMmv by jedierikb (@jedierikb) on CodePen

Link to comment
Share on other sites

Hello sitherikb,


I'm not seeing this on Windows 7 64-bit latest Firefox.


You shouldn't have to use a dot text node and hide it. All you have to do is use a non-breaking space. Which is just an HTML entity that is white space, and is treated as a text node, by the browser HTML parser.

<div id="C"> </div>

That will create a text node and be invisible automatically.


Also have you tried using a real image instead of a base64. I had issues cross browser with animating base64 images.


Other solutions are to try one of the 3 following things:

  1. You could also force a redraw of the element by just removing a class and then adding the class right back on the element. But can be expensive depending on how low the element is in the DOM, which could force re-layout. Maybe something like this:
    var element = document.getElementById("myElement");
    element.className = element.className;
  2. And you could also try removing the element from the DOM and then immediately re-append or re-prepend the element back in the DOM. Or try to insert a blank div with a   in the DOM and then remove it.
  3. Another trick which is my favorite, is to change the inline style to display: none and than back to display: block
    var element = document.getElementById("myElement");
    element.style.display = "none";
    var fixReRender = element.offsetHeight; /* just needed to calculate before the next set */
    element.style.display = "block";

All three things above would force a redraw or repaint.


But you would have to test since i do not have a MAC to test Firefox on :)

  • Like 4
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...