Closed Bug 1649051 Opened 4 years ago Closed 2 years ago

Header animation is very slow

Categories

(Core :: Layout, defect)

77 Branch
Unspecified
Windows 10
defect

Tracking

()

RESOLVED INVALID
Tracking Status
firefox79 --- affected

People

(Reporter: karlcow, Unassigned)

References

()

Details

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)
 }

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.

Component: DOM: Animation → Layout
Depends on: 1638152

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)

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

Depends on: 1324591
No longer depends on: 1638152

Well, it should be bug 1100357.

Depends on: 1100357
No longer depends on: 1324591

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.

Flags: needinfo?(hikezoe.birchill)

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).

Flags: needinfo?(hikezoe.birchill)

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.

Severity: -- → S3

The site is no longer live.

Status: NEW → RESOLVED
Closed: 2 years ago
Webcompat Priority: ? → ---
Resolution: --- → WORKSFORME
Resolution: WORKSFORME → INVALID
You need to log in before you can comment on or make changes to this bug.