Demo lags?

[OmgImAlexis]

Marko Version: x.x.x

Not sure as it's on the main website.

Details

I was trying the demo out.

Expected Behavior

The demo to at least be performant enough to handle rapid clicks from the user.

Actual Behavior

The demo lags to the point of it showing clicks when my cursor wasn't even on the button.

Possible Fix

Not sure?

Your Environment

• Environment name and version (e.g. Chrome 39, node.js 5.4): N/A
• Operating System and version (desktop or mobile): Safari 14.1 on macOS 11.3.1.
• Link to your project: N/A

Steps to Reproduce

1. Goto https://markojs.com
2. Scroll down to the example
3. Click a bunch on the button
4. Profit?

https://user-images.githubusercontent.com/6525926/126084491-fbb764dc-267a-4c54-8a36-7ce9552f7f72.mp4

[taylor-hunt-kr]

Can confirm this happens in Safari — on the same machine in Firefox, runs smoothly.

If I add visibility:hidden to the two DOM-powered animations in the sections beneath, Safari has no problem. Looking at those animations, they’re doing things like modifying width instead of transform, which is almost certainly tying up the main thread with reflow.

[tigt]

Also can confirm this does not happen in Chrome, so seems specific to Safari.

Some futzing around in DevTools suggests the fix is to animate transform: scaleX() on <div.demo-page-progress/> instead of width:

The parts that pop in already use opacity for showing/hiding, so they’re already GPU-accelerated. I made this PR to fix it: https://github.com/marko-js/website/pull/63