1284720 - Expandoboard demo does not clip contents correctly

Status: RESOLVED DUPLICATE of bug 1217803

(Core :: DOM: Animation, defect)

Description

[Brian Birtles (:birtles)]

STR:
1. Go to http://web-animations.github.io/web-animations-demos/
2. Click 'Expandoboard'

(Note that going directly to http://web-animations.github.io/web-animations-demos/#expandoboard does not work in either Chrome or Firefox)

Expected results:
The animated pattern is clipped to the circle outline and moves smoothly.

Actual results:
The animated pattern frequently extends beyond the circle outline and there are jumps in its movement.

Comment 1

[Hiroyuki Ikezoe (:hiro)]

I have not checked what polyfill does inside the example, but this demo works correctly if both dom.animations-api.element-animate.enabled and dom.animations-api.core.enabled are false.

Comment 2

[Brian Birtles (:birtles)]

(In reply to Hiroyuki Ikezoe (:hiro) from comment #1)
> I have not checked what polyfill does inside the example, but this demo
> works correctly if both dom.animations-api.element-animate.enabled and
> dom.animations-api.core.enabled are false.

The polyfill uses Element.animate() when available. i.e. If we turn off those prefs it will animate using JS. If we turn either of those prefs on, we'll run the animation as a native animation, likely on the compositor thread.

Comment 3

[Robert Longson [:longsonr]]

is bug 1284586 related?

Comment 4

[Brian Birtles (:birtles)]

(In reply to Robert Longson from comment #3)
> is bug 1284586 related?

Seems likely.

Comment 5

[Bas Schouten (:bas.schouten)]

Sounds like an OMTA issue. Kats might know who best to talk to about this and was the author of the related bug patch.

Comment 6

[Kartikaya Gupta [:kats]]

(In reply to Brian Birtles (:birtles; away 14-18 July, busy 19-22 July) from comment #4)
> (In reply to Robert Longson from comment #3)
> > is bug 1284586 related?
> 
> Seems likely.

It's not clear to me why that bug would be related. It seems like the clipping issue occurs even with paint-skipping or APZ off. Bug 1284586 is specifically about the clip lagging behind when APZ and paint-skipping are on.

Comment 7

[Kartikaya Gupta [:kats]]

In fact given that it happens with APZ off it seems like the layout side of things isn't clipping properly.

Comment 8

[Alice0775 White]

[Tracking Requested - why for this release]: Layout issue due to regression.


There are several regression and progression since 29-Jan-2016.

#1 Regression(normal -> crash)
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=23f22124b285c901e08e29b2d73fa830fc1c8b5c&tochange=f735dd2711d265c86322c485a22de7af43ac4f74

#1 Regressed by: Bug 1096773


#2 Progression(crash -> Blank):
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=d0382e8ba2696c4ae7835379b4480ec118b5d180&tochange=6b16abc856972cf48e0254d881d8e1ad1ad7f353

#2 Progressed by : Bug 1239889


#3 Progression(Blank -> animate but wrongly cripped):
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=2cf416db49d5503f1b43c6f80fbaa30d12debb7b&tochange=b5e79510a9b0878d167de5dd725d49937bbca9ed

#3 Progressed by : Bug 1260983

Comment 9

[Kartikaya Gupta [:kats]]

Thanks Alice!

Comment 10

[Brian Birtles (:birtles)]

It doesn't look like this is a regression. It looks like it has been getting progressively closer to working. It only appeared to work in the first place because we didn't implement Animatable.animate so the polyfill was taking effect. Once we implemented Animatable.animate we started running this animation using native code and it went from crashing, to rendering nothing, to rendering something but with graphical defects.

So, we still don't know what the cause of this is.

Comment 11

[Hiroyuki Ikezoe (:hiro)]

Attachment: Reduced test case using CSS animations

Yeah, this issue happens with CSS animations.

Comment 12

[Markus Stange [:mstange]]

This testcase is lovely and looks like something Matt Woodrow would want to fix.

Comment 13

[Alice0775 White]

With testcase attachment 8770760 [details],
layers.offmainthreadcomposition.async-animations = false seems to fix

Comment 14

[Hiroyuki Ikezoe (:hiro)]

This seems to be a dup of bug 1217803.

Comment 15

[Hiroyuki Ikezoe (:hiro)]

I've confirmed Markus's suggestion in bug 1217803 comment 10 fixes this issue.