Closed Bug 844947 Opened 10 years ago Closed 3 years ago

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

Categories

(Core :: Layout, defect)

x86
macOS
defect
Not set
major

Tracking

()

RESOLVED FIXED

People

(Reporter: wenzel, Unassigned)

References

Details

(Whiteboard: [Snappy])

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.
Looks to me like over-invalidation. Can you confirm Matt?
Component: Graphics → Layout
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.
wenzel: Can you find examples of other choppy scrolling issues on other website (doesn't have to be a Mozilla website)?
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.
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?
Summary: Choppy scrolling on Mozilla MWC site (and many others) → Choppy scrolling on Firefox Partners website on Mac Retina display (and many others)
Summary: Choppy scrolling on Firefox Partners website on Mac Retina display (and many others) → Choppy scrolling on Firefox Partners website (and many others) on Mac Retina display
(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/
Whiteboard: [Snappy]
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.
Adding needinfo for Matt per comment 1.
Flags: needinfo?(matt.woodrow)
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.
Flags: needinfo?(matt.woodrow)
(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.
Duplicate of this bug: 827041
Summary: Choppy scrolling on Firefox Partners website (and many others) on Mac Retina display → Choppy scrolling on Firefox Partners website (and many others) on Mac Retina in scaled (not max) resolution, CSS transformations get choppy - everything gets redrawn

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

Status: NEW → RESOLVED
Closed: 3 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.