CSS animation slow when "trespassing" parent element boundary

RESOLVED WORKSFORME

Status

()

Core
Layout
RESOLVED WORKSFORME
5 years ago
2 years ago

People

(Reporter: nofatclips, Unassigned)

Tracking

22 Branch
x86_64
Windows 7
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

5 years ago
User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:22.0) Gecko/20100101 Firefox/22.0 (Beta/Release)
Build ID: 20130618035212

Steps to reproduce:

While creating a MineSweeper game (http://nofatclips.github.io/minesweeper.js/) in JavaScript I stumbled in a quirk of Firefox/Gecko which apparently is occurring only when a CSS animation "overflows" the boundary of the parent of the animated element.

When the player right clicks a cell in the game, I've used CSS "animation" and "keyframes" to rotate the cell from 0 to 90 degrees.


Actual results:

It works smoothly, except when you click a cell on the border (first/last row/column): in that case the animation is choppy (globally, that is also for any other cell that may be animating at the same time)

I've prepared this Plunk to reproduce the issue. The CSS also includes the workaround (literally: adding a border) commented.

http://embed.plnkr.co/7lZB5i/preview

Just use the right mouse button on any cell and notice the difference when you click the cells in, say, the leftmost column.


Expected results:

Should work smoothly for all cells, as it does on Chrome and IE10.

Updated

5 years ago
Component: Untriaged → Layout
Product: Firefox → Core
Confirmed against Mozilla/5.0 (Windows NT 6.1; WOW64; rv:27.0) Gecko/20100101 Firefox/27.0 ID:20131003030203 CSet: 0e26e6f12ad9

Care to attach a *reduced* Testcase (without Dependency on external Libraries) showing the Issue?
Flags: needinfo?(nofatclips)
Keywords: testcase-wanted
(Reporter)

Comment 2

4 years ago
Oh, I forgot about this. As of version 24.0 the bug has apparently been fixed.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 4 years ago
Flags: needinfo?(nofatclips)
Resolution: --- → WORKSFORME
Umm, I still see the Issue of sloppy Animation on top/bottom/right/left-most column/rows with Firefox 24-27 as stated above.
Keywords: testcase-wanted
You need to log in before you can comment on or make changes to this bug.