Interaction is slow on mobile

[benjamind]

Expected Behavior

Hover and down/up interactions should be fast and snappy.

Actual Behavior

When tapping buttons or any element which causes a visual update the change is very laggy. I'm seeing approximately 700ms delay in 'down' state interactions.

Reproduce Scenario (including but not limited to)

Browse the site on a pixel 2 or similar mobile devices.

Steps to Reproduce

Tap on a button and observe the delay in the down / up state transitions.

Browser name/version/os (ie Chrome Version 62.0.3202.94 (Official Build) (64-bit) MacOS)

Chrome, Android 9. Pixel 2.

Spectrum-CSS version

Current.

[GarthDB]

Spectrum-CSS is just the css. We can use a small js lib for the docs to reduce the default mouse interaction delays. Something the js implementations should do. We’d also need to document it somewhere for people just wanting the css to use I their own projects.

[benjamind]

Why does it need JS to solve slow update of css active pseudo selectors? I do not believe these are delayed on mobile. I can tap a button and watch the active state occur well after my finger has come up, I think this is another issue caused by the size of the docs page.

[GarthDB]

I assumed you were referring to the 300ms click delay.

[filmaj]

Do you think this has anything to do with #6 - that is, the extensiveness of the DOM on the docs page has something to do with this, or is this something we can isolate to outside of the docs page?

[benjamind]

Potentially yes. the pseudo selector change causes a style recalculation which in turn can cause update layer tree, layout and paint operations. All these are potentially impacted by the size of the DOM. From a quick check on my desktop, mouse down or over one of our elements causes recalculate style then a number of layer tree updates. That update is taking ~16ms, and this is on a high end i7 with a gaming GPU. That layer tree cost is going to impact mobile a lot more.

[misterbrownlee]

This was fixed by the docs update a while back. Thanks for the input, everyone.