844947 - Choppy scrolling on Firefox Partners website (and many others) on Mac Retina in scaled (not max) resolution, CSS transformations get choppy - everything gets redrawn

Status: RESOLVED FIXED

(Core :: Layout, defect)

Description

[Fred Wenzel [:wenzel]]

On my new retina Macbook pro, scrolling on this page is really, really choppy:

http://mozilla.org/mwc

People on other, similar machines, cannot reproduce this. I wonder if hardware acceleration is disabled for some reason?

I used about:support's "Reset Nightly" functionality, to no avail.

I am happy to help debug this, if you let me know what I can do.

Comment 1

[Benoit Girard (:BenWa)]

Looks to me like over-invalidation. Can you confirm Matt?

Comment 2

[Chris More [:cmore]]

We just researched this problem more and discovered it is a retina-only display issue on a Mac running either Firefox or Chrome (probably Safari too). If you running a retina display in the recommended resolution, the CSS transformations get choppy. If you are running retina is the maximum resolution, the scrolling is very smooth. This may be difficult to resolve since it is not a browser or website issue, but a Mac hardware issue.

Comment 3

[Chris More [:cmore]]

wenzel: Can you find examples of other choppy scrolling issues on other website (doesn't have to be a Mozilla website)?

Comment 4

[Chris More [:cmore]]

wenzel: Can you also try Safari? I read that Safari had a fix in to resolve this issue, but other browsers have not fixed the issue yet.

Comment 5

[Fred Wenzel [:wenzel]]

Okay it appears this is possibly a platform issue. On a *scaled* retina display (i.e., when you set it to run at a logical resolution smaller than the full-fledged retina resolution of 2880 x 1800), it becomes very choppy.

If you run it at full resolution, it performs fairly well.

Chrome doesn't scroll smoothly either, which makes me think it is an OSX bug.

That said, I read:
http://www.anandtech.com/show/6495/latest-webkit-build-doubles-scrolling-performance-on-macbook-pro-with-retina-display

and tried out today's Safari Nightly, which scrolls fairly well on that page. It appears, they are applying optimizations that neither Google nor we are. Do we know which?

Comment 6

[Fred Wenzel [:wenzel]]

(In reply to Chris More [:cmore] from comment #3)
> wenzel: Can you find examples of other choppy scrolling issues on other
> website (doesn't have to be a Mozilla website)?

Basically every site that does some sort of "parallax scrolling effect" (possibly: with large background images). Here's a neat list of things that are fun to look at and very choppy to use:

http://www.visualswirl.com/inspiration/30-examples-parallax-scrolling-effects-web-design/

Comment 7

[Chris More [:cmore]]

Found some more reading:

https://github.com/richardshepherd/Parallax-Scrolling/issues/6

Comment 8

[Chris More [:cmore]]

What does everyone think about getting some input from the Firefox engineering side? Maybe there are plans to help improve this issue from a browser perspective or maybe they are not aware.

Comment 9

[Anthony Ricaud (:rik)]

Adding needinfo for Matt per comment 1.

Comment 10

[Matt Woodrow (:mattwoodrow)]

I don't think this is over-invalidation as such, but we just need to draw a lot. This shows up a lot more on retina displays, since we need to draw 4x the number of pixels each time.

Would it be possible to get a reduced/simplified testcase for just the 'parallax' scrolling part? (You can check the amount of painting being done using the pref 'nglayout.debug.paint_flashing')

I suspect that we need to use transforms to place the elements that move independently of scrolling, since this can be optimized much easier by the engine.

Comment 11

[Fred Wenzel [:wenzel]]

(In reply to Matt Woodrow (:mattwoodrow) from comment #10)
> Would it be possible to get a reduced/simplified testcase for just the
> 'parallax' scrolling part? (You can check the amount of painting being done
> using the pref 'nglayout.debug.paint_flashing')

Perhaps the simplest test case is just big background images spanning the entire window moving over each other (haven't checked that out yet, but that might be simpler than introducing more complex shifting code that parallax requires). I checked out some of the affected pages, and with paint_flashing, the entire content area flashes while scrolling. It's redrawing everything, all the time.

Comment 13

[Fred Wenzel [:wenzel]]

This has long been fixed. Retina is not a new technology and scrolling works just fine.