1264996 - CSS Calc() causes non-stop repaints on OSX

Status: RESOLVED INVALID

(Core :: Graphics, defect)

Description

[Nathan Rijksen]

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36

Steps to reproduce:

On OSX, open up the following codepen in firefox:

http://codepen.io/Naatan/pen/ONZPpx

Then launch Quartz Debug (part of Graphics Tools - https://developer.apple.com/downloads/?name=for%20Xcode), and hit Tools > Flash Screen Updates. (WARNING - Do NOT do this if you have epilepsy).


Actual results:

Quartz Debug shows continuous repaints to Firefox


Expected results:

No repaints should happen unless something in the UI changed.

Comment 1

[Nathan Rijksen]

Additional notes:

 - Removing the calc() css rule stops the repaints
 - This could easily happen on all platforms, but I don't know how to test repaints on platforms other than OSX

Comment 2

[Nathan Rijksen]

It seems the issue originates from the values used in calc. If I used fixed values it does not cause repaints, if I use percentages or viewport values (vw, vh) it causes continuous repaints.

Comment 3

[Markus Stange [:mstange]]

Great find.

(In reply to Nathan Rijksen from comment #1)
> I don't know how to test repaints on platforms other than OSX

You can set the pref nglayout.debug.paint_flashing in about:config. But this bug will probably reproduce on all platforms.

Comment 4

[Loic]

With FF45 on Win 7 and nglayout.debug.paint_flashing=true, I can't reproduce it, there is no flashing when painting the blue square.

Comment 5

[Markus Stange [:mstange]]

I can reproduce this on OS X, but it goes away after a few seconds. I have to reload the whole tab to make it happen again.
Are you sure this related to the calc() rule? It seems to me like it's related to codepen's "Loading..." text, which becomes invisible shortly after loading but stays around invisibly for a few more seconds.
Something is changing about that text that makes Firefox think it needs to repaint it even when it's invisible. I haven't yet found out what it is. (And it's not really easy to find out.)

Comment 6

[Nathan Rijksen]

Codepen is just a reproduction of the issue. I originally found the bug on the master branch of Komodo IDE, which is based on Mozilla 35.

Like I said the issue seems to only happen with percentage or viewport dimensions combined with calc(). So whether in fact the bug is with calc() or with the dimensions themselves I couldn't say.

Comment 7

[Markus Stange [:mstange]]

I can't seem to reproduce this issue outside of codepen. I loaded this URL:
data:text/html,<div%20style="background-color:%20skyBlue;height:%206em;left:%20calc(50%%20-%203em);position:%20absolute;top:%20calc(50%%20-%203em);width:%206em;">
in Firefox 35 (retrieved using "mozregression --launch 35") and it didn't keep on flashing.

Comment 8

[Nathan Rijksen]

Hmm I just tried it on jsfiddle and I get the same result as you. The test case for Komodo was quite specific so it's not something that would be useful here.

It is odd that it happens on codepen too, despite the loading animation not being visible. But that may just be a matter of writing proper CSS.

Comment 9

[Nathan Rijksen]

After checking up on this again in Komodo it appears the calc stuff was correlation rather than causation. The real issue was hidden css animations causing repaints.