942531 - element with radial gradient appear to skip frames during css transition

Status: RESOLVED WORKSFORME

(Core :: Graphics, defect)

Description

[David Frank]

User Agent: Mozilla/5.0 (Windows NT 6.2; WOW64; rv:24.0) Gecko/20100101 Firefox/24.0 (Beta/Release)
Build ID: 20130910160258

Steps to reproduce:

I will produce a simple test case when available, but here is my scenario:

1. a position:fixed overlay div has simple css transform/transition applied to it, transition is triggered by adding a class or :target.
2. when such div has only background-color or linear-gradient, the transform appear to be smooth.
3. when radial gradient is applied, firefox appear to skip frames a lot during transition.

(Firefox on Windows or WebKit/Blink browser on Android does not experience such issue. My device is Samsung Galaxy Note 2, tested using both Firefox 25 stable and Firefox 26 beta)


Actual results:

transition appear to be laggy


Expected results:

transtion should be smooth.

Comment 1

[Aaron Train [:aaronmt]]

Are you able to reproduce with Nightly (http://nightly.mozilla.org)? And yes, a test-case is much appreciated.

Comment 2

[David Frank]

tested on v28 nightly (ARMv7), same issue can be reproduced.

also made 3 reduced testcases:

plain color
http://jsfiddle.net/8dkKv/1/

linear-gradient
http://jsfiddle.net/ddaZL/1/

radial-gradient
http://jsfiddle.net/xs2py/2/

radial version runs significantly slower on my galaxy note 2.

Comment 3

[Liz Henry (:lizzard) (relman/hg->git project)]

I am seeing some odd behavior on Firefox 28, checked it on an android G2 phone. The radial version is jittery and moves the text oddly across the screen.

Comment 4

[Gregory Pappas [:gregp]]

Unable to reproduce in current versions, all of these test cases perform well now.