1362892 - Slow inset box-shadows on tekrevue.com

Status: RESOLVED WORKSFORME

(Core :: Graphics, defect, P3)

Description

[Markus Stange [:mstange]]

Scrolling on https://www.tekrevue.com/tip/opt-out-os-x-pre-release-updates/ checkerboards a lot.

Profile: https://perfht.ml/2qeYWxX

Looks like it's all due to inset box-shadows.

Comment 1

[Jeff Muizelaar [:jrmuizel]]

How does this look in webrender?

Comment 2

[Markus Stange [:mstange]]

No checkerboarding at all in webrender on that page, but there are a few frameskips due to long composites: https://perfht.ml/2wRf0bT

Comment 3

[Markus Stange [:mstange]]

But with webrender the inset box shadows seem to have a big cost, too. While they're on the screen, the GPU cost per frame goes up from 4.00ms to 6.66ms on my machine.

These box shadows are applied to the "Related articles" images on the right.

.widget_posts_related li::before {
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0;
    right: -300px;
    bottom: 0;
    left: -300px;
    box-shadow: inset 0 -90px 200px rgba(0,0,0,.5);
}

So they have a radius of 200px and they right and left parts are clipped off.

Comment 4

[Mayank Bansal]

This is smooth now, and we have other bugs filed to track box shadows.
https://share.firefox.dev/4dC6LRQ