1736960 - CSS clip-path creates a lag in refreshing the position of box

Status: RESOLVED DUPLICATE of bug 1727016

(Core :: Graphics: WebRender, defect)

Description

[Karl Dubost💡 :karlcow]

1. Scroll to the bottom of the page.
2. Scroll up with mouse wheel or trackpad
3. The images start to be misaligned
4. If you wait a bit the image comes back in position.

I recorded profiles
https://share.firefox.dev/3AUT5xC
https://share.firefox.dev/3aWKSOT

The interesting part is that if you scroll a bit and stops. The shifting of the images are happening, but they catch up. Ah it seems to match when the scrollbar disappears.

Removing clip-path fixes it.

/* main.8c9a15b2208e61d905d6.css | https://ssl.pstatic.net/t.static.blog/mobilencc/static/css/main.8c9a15b2208e61d905d6.css */

.thumb__Opuee {
  /* clip-path: url(#roundmask6); */
}

The full rule is

.thumb__Opuee {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	font-size: 0;
	-webkit-clip-path: url(#roundmask6);
	clip-path: url(#roundmask6);
	border-radius: 6px;
}

That looks like a perf issue.
Maybe https://bugzilla.mozilla.org/show_bug.cgi?id=914617

I tried to make another profile after reducing a bit the code.
https://share.firefox.dev/3m2GynH

but I haven't managed yet to make a test case showing the issue.

Comment 1

[Alice0775 White]

Regression window:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=a518405abe4c93e6d8df622f59d5f01c4766e1d5&tochange=a09e4ce9ebba8fa4a29a4833560c8ee807018c03

I confirmed setting apz.allow_zooming = false fixes this.

Comment 2

[Timothy Nikkel (:tnikkel)]

Is there a useful regression window with apz.allow_zooming = true?

Comment 3

[Alice0775 White]

(In reply to Timothy Nikkel (:tnikkel) from comment #2)

Is there a useful regression window with apz.allow_zooming = true?

Regression window(with apz.allow_zooming = true):
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=d3d642b624886729636c3690a806f38b4d737731&tochange=e9ff3fec51d3de454f607b69b4acddc2a81409c1

Suspect: Bug 1503616

Comment 4

[Timothy Nikkel (:tnikkel)]

Thanks for that Alice.

This is very similar to bug 1727016. It's highly likely the fix for bug 1727016 will fix this too.

Comment 5

[Timothy Nikkel (:tnikkel)]

I think this page has changed? It no longer reproduces for me.

Comment 6

[Karl Dubost💡 :karlcow]

Yes interesting.
They changed it to

.thumb__Opuee {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	font-size: 0;
	-webkit-clip-path: inset(0 round 6px);
	clip-path: inset(0 round 6px);
	border-radius: 6px;
}

so clip-path: url(#roundmask6); became clip-path: inset(0 round 6px);

we need a test case for reproducing when using SVG as a mask.

Comment 7

[Timothy Nikkel (:tnikkel)]

If I go in dev tools and change the clip-path back I can reproduce a problem (I don't remember what the original problem looked like so I can't say if it's the same). My fix for bug 1727016 fixes that problem too.

It would make sense if the reason for the change to the page is that #roundmask6 did not exist. In bug 1727016 the testcase also references a clip-path that does not exist and that is the key reason that the page tickled a bug in gecko.

Comment 8

[Olli Pettay [:smaug][[e-mail]]]

(this doesn't seem to be a performance issue, but more like a correctness issue. And bug 1727016 should fix this, so no need to track this as a qf bug.)

Comment 9

[Timothy Nikkel (:tnikkel)]

I'm going to mark this dup of bug 1727016 as that is what I think it is, but I can't confirm because the site changed.