1649051 - Header animation is very slow

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Karl Dubost💡 :karlcow]

I don't know if this is DOM:Animation or Layout.

As reported on https://webcompat.com/issues/54452

Go to https://myki.com/careers/
Heading animation is really laggy / slow
(Web render is enabled)

even when webrender is off, this is laggy.

TranslateX and TranslateY are very laggy. TranslateZ seems to fare a bit better.

https://bugzilla.mozilla.org/buglist.cgi?quicksearch=rotate%20animation&list_id=15313333

the animation is created by a series of 147 animated li…

section#careers #banner .scene .wrapper .tunnel {
	position: relative;
	width: 15.384rem;
	height: 15.384rem;
	margin: 0 auto;
	transform-style: preserve-3d;
	animation: roundandround 500s infinite linear;
}

@keyframes roundandround {
 to {
  transform:rotateX(360deg)
 }

Comment 1

[Hiroyuki Ikezoe (:hiro)]

Moving to Layout for now.
Though I haven't looked into defail, this will be mitigated by 1638152. That said, on Chrome it's much worse than Firefox.

Comment 2

[Karl Dubost💡 :karlcow]

so on macos 10.15.5 (19F101) Intel Iris Plus Graphics 1536 Mo, 2 GHz Intel Core i5 4 Core

• smooth. Chrome Canary Version 86.0.4185.0 (Build officiel) canary (64 bits)
• smooth. Safari Tech Preview Release 109 (Safari 14.0, WebKit 15610.1.17.2)
• laggy. Firefox Nightly 79.0a1 (2020-06-28) (64-bit) (webrender off in about config, but is on in about:support)

Comment 3

[Hiroyuki Ikezoe (:hiro)]

Oops, I mis-read as it's WebRender on.

Comment 4

[Hiroyuki Ikezoe (:hiro)]

Well, it should be bug 1100357.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

I don't think that's it. I think we're incorrectly throttling the animation. If you give it a finite iteration count, then we don't throttle it, and the animation looks smooth.

Comment 6

[Hiroyuki Ikezoe (:hiro)]

On my environment I can see "the frame size is too large relative to the viewport blah blah" warning on the animation inspector.
You mean about "spin" animation? Then there are two different issues. (And I guess there is one more problem related preserve-3d).

Comment 7

[Karl Dubost💡 :karlcow]

Let me fix something I said earlier I said I tested with webrender off as it was displayed in about:config.
BUT about:support tells a different story. Compositing WebRender
So the issue on macOS happens with WebRender.

I realized this because of this message

The Graphics team recently enabled WebRender on MacOS (with newer Intel GPUs) in Nightly by default.

Comment 8

[Ksenia Berezina [:ksenia]]

The site is no longer live.