search

jaegertracing / jaeger-ui

Web UI for Jaeger
http://jaegertracing.io/
Apache License 2.0
1.15k stars 483 forks source link

Use CSS scroll-behavior instead of animating the scroll #240

Open tiffon opened 6 years ago

tiffon commented 6 years ago

Requirement - what kind of business use case are you trying to solve?

Improved performance and maintainability.

Problem - what in Jaeger blocks you from solving the requirement?

Nothing. This change is an implementation detail.

Proposal - what do you suggest to solve the problem or improve the existing situation?

Remove the current smooth scrolling behavior, which animates the scroll position in JavaScript:

https://github.com/jaegertracing/jaeger-ui/blob/e31801d1a283cc40b360cfda01e4e061a124c0d8/packages/jaeger-ui/src/components/TracePage/scroll-page.js#L26-L31

And, instead, use the scroll-behavior: smooth CSS property on the root element.

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior#Values

Any open questions to address

Consider adding the CSS class u-simple-scrollbars to the <body> or making the styling global, so scroll bars are always present.

tiffon commented 5 years ago

Note, this feature is not available in all browsers targeted by Jaeger UI.

https://caniuse.com/#feat=css-scroll-behavior

The following can be used to guard for support.

'scrollBehavior' in document.body.style