937590 - Slow and Buggy CSS Transitions on FireFox 25 in Mac

Status: RESOLVED INCOMPLETE

(Core :: CSS Parsing and Computation, defect)

Description

[Krisztian Horvath]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36

Steps to reproduce:

Created CSS Transitions with scaling, transforming and rotating. See Example: http://themepunch.com/test2/


Actual results:

FireFox 24.x was perfect. After FireFox 25 on MAC it looks slow, shaking, very laggy.


Expected results:

It should work like in Chrome, Safari, IE, FireFox 25 on PC.  We tested it over 10 different MAC's and PC's.  As soon we update to FF25 Bug is existing.

Comment 1

[Bogdan Maris, Desktop Test Engineering]

I tested on two different Mac 10.9 machines and the Transition is very slow on every build I tested, 24, 25, 4. Can u use the mozregression tool http://mozilla.github.io/mozregression/ in order to find a regression since on my machines I can`t find a regression? On windows 7 the transition is smooth.

Comment 2

[Krisztian Horvath]

i will give a go for mozregression, however a question, how comes that on PC Mozilla it is very smooth, also on MAC on any other browsers, but in FF on MAC it just become very slow ? We have over 60% CPU Usage.  Also we just found a lot other bugs like transition scales under 0.1% becomes a black background at transparent png images (making some flickering effect), we have really strange "shaking" effect and unsharp borders.  These are all in the new introduced Version 25 on MAC.   On PC looks perfect.  

I will post tomorrow the result of mozregression also.

Comment 3

[Ioana (away)]

Removing qawanted per comment 1.

Krisztian, did you get any results with mozregression?

Comment 4

[Krisztian Horvath]

Hi,

yes, i went back and checked ver 24.0.0 - 24.0.10Beta and also tested Beta 26. In Beta26 and in version 24.10Beta we had a huge Performance different against the version 25 / 25.0.1. 

I did not collected the datas with mozregression yet. Try to eliminate all unneeded side effects, to concentrate only on the issues which are really Browser dependent.  Black "HALO" effect on Transparent PNG Images under scale 0.01 exists still. I will try to collect some data the coming week and post it for you.  Thanks again the support so far.

Comment 5

[Ioana (away)]

(In reply to Krisztian Horvath from comment #4)
> Hi,
> 
> yes, i went back and checked ver 24.0.0 - 24.0.10Beta and also tested Beta
> 26. In Beta26 and in version 24.10Beta we had a huge Performance different
> against the version 25 / 25.0.1. 
> 

Did 26 beta go better or worse than 25? Could you please give more details on the difference between these two builds?

Comment 6

[Krisztian Horvath]

Hi,

version 26 Beta 7 had a better performance than 25 or 24. If we reduce the amount of animated elements, performance gets better in both version.  However we can show you the strange flickering effects better in this example:

http://themepunch.com/codecanyon/revolution_wp/ 

In case you check it in any other browsers you will see a smooth clean animation. However in FireFox (tested now in all version 24 - 26 different Betas and Releases) it is shaking vertically, and also sometimes you see some black Halo effect also (slide 2 animated Devices).   

In this example i can reproduce the shaking effect on MAC and on PC also.  

Any suggestion, idea would be great.

Thanks a lot,

Krisztian

Comment 7

[Ioana (away)]

(In reply to Krisztian Horvath from comment #6)
> Hi,
> 
> version 26 Beta 7 had a better performance than 25 or 24. If we reduce the
> amount of animated elements, performance gets better in both version. 
> However we can show you the strange flickering effects better in this
> example:
> 
> http://themepunch.com/codecanyon/revolution_wp/ 
> 
> In case you check it in any other browsers you will see a smooth clean
> animation. However in FireFox (tested now in all version 24 - 26 different
> Betas and Releases) it is shaking vertically, and also sometimes you see
> some black Halo effect also (slide 2 animated Devices).   
> 
> In this example i can reproduce the shaking effect on MAC and on PC also.  
> 
> Any suggestion, idea would be great.
> 
> Thanks a lot,
> 
> Krisztian

On my Mac OS X 10.9, the difference between how this works on Safari and Firefox is barely noticeable (I actually had to stare to the screen to catch it multiple times). This might be more obvious on older/less-performant machines though.

Perhaps disabling hardware acceleration could help you improve your experience.

Getting the regression window (see comment 1 for tool) would give it a chance that this bug will get fixed soon though. Unfortunately, I can't do that myself, since I see the bug rarely and it's very little visible. Please let me know if you want to give this a try and need any help.

Comment 8

[Mats Palmgren (inactive)]

The sliders at the URL looks fine to me in FF26 on OSX.

Krisztian, do you still see the problem in the FF26 release build?

Comment 9

[Krisztian Horvath]

Hi,

yes, unfortunately the issue is still very significant. I noticed now also on other css animations. 
If you see again the page: http://themepunch.com/codecanyon/revolution_wp/ you can see a hard shaking at the end of the animations. Elements shaking vertical for a half sec around 5 px up and down.  Same now on PC and MAC.

If you see this page : http://themepunch.com/test2/  and you change between the "left/right" page under the grid, you will see how the elements are shaking.  Compare this to chrome, ie, safari, opera and you will see the significant difference of quality and smoothness.

I really hope that there will be a solution from FF to this. I contacted already different animation engine coders, and we all have the same experiences :( 

Thanks a lot for your feedbacks and support.

Krisztian

Comment 10

[Ryan VanderMeulen [:RyanVM]]

Sorry for the lag here, but lots of graphics changes have been made since the last update to the bug. How are things on current Firefox builds?

Comment 11

[Ryan VanderMeulen [:RyanVM]]

Paul, can you please see how this performs on OSX with newer versions of Firefox?

Comment 12

[Paul Oiegas [:poiegas], PM for (Ecosystem QA, Services QA, WebCompat QA, Ads QA, and Solo QA teams)]

Hi Ryan,

Tested this behavior on an old iMac (Core 2 Duo processor) and also on a newer iMac (Intel Core i5 processor). On latest Nightly (45.0a1) the final part of the animation still seams to be jumping in the direction of slide like it would skip a few frames. This occurred on both machines with Mac OS 10.9 and 10.10. 
Verified this also on Chrome and Safari and the animation is for sure more smooth. 
Used "http://revolution.themepunch.com/" since the one provided in comment 0 is no longer available.

Comment 13

[Ryan VanderMeulen [:RyanVM]]

Yeah, I can see jankiness on Win10 too compared to Chrome. Not sure if that's really the same issue as this was originally filed for, though. Windows perf seems pretty similar on older versions as well from what I can see.

Paul, can please try to reproduce the OSX slowdown between 24 & 25 that this bug was originally filed for and comment on the difference in perf between Fx25 and current nightly? If you can reproduce the original slowdown but also see improved perf on nightly, I think we may be better off filing a new bug for the current issue and closing this one out as WFM.

Comment 14

[Paul Oiegas [:poiegas], PM for (Ecosystem QA, Services QA, WebCompat QA, Ads QA, and Solo QA teams)]

Just checked on Firefox 24.0 and 25.0 and it behaves exactly the same as on latest Nightly build. Still I forgot to mention that this lag can only be observed now at the page title (text that loads first). The images and other texts on the page are smoothly loaded.

What do you advise in this case Ryan ?

Comment 15

[Ryan VanderMeulen [:RyanVM]]

Given that the original testcase is gone and we're having difficulties reproducing the original problem reported here, let's close this out as incomplete. I've filed bug 1225169 to track the lack of smoothness we can still see vs. other browsers across all platforms.