5 ms·

First example - Image Slider is very janky for me. Firefox, beefy GPU PC, Ubuntu. The purpose of this site is awesome! I appreciate the transparency of pointin

by ozten 4y ago

First example - Image Slider is very janky for me. Firefox, beefy GPU PC, Ubuntu. The purpose of this site is awesome! I appreciate the transparency of pointing out issues like "no user control over images".

winrid 4y ago
Interesting, which GPU? On Windows, it's very smooth for me, but I have a 3090ti... Chrome's task manager says the page is using ~0% CPU, 20mb of GPU memory, and 90mb of ram.
- another_story 4y ago
  It worries me we're discussing gpus when it comes to an image slider.
  - dspillett 4y ago
    A surprising amount of stuff that you might think it's done with just dumb bitmap rendering surfaces, is these days actually painted on graphics primatives with it all composited together by your GPU. It likely isn't using much more power than if running at entirely idle, often enough less than the extra a CPU might use doing the same job at a lower frame rate, displaying and updating your current desktop.
  - Regnore 4y ago
    Why does it worry you? GPUs are designed to push pixels around. This a perfect use of them.
    - sgtnoodle 4y ago
      I think the concern is about the perception that you need hardware capable of drawing 200 billion pixels per second in order to render a webpage.
  - heavyset_go 4y ago
    Most browsers are GPU accelerated.
- ozten 4y ago
  RTX 2070. Stock Ubuntu install, so maybe I need to optimize Firefox somehow.
  - deleted 4y ago
    [deleted]
Cyberdog 4y ago
Working fine for me on both Safari and Firefox on an M1 Mac. Regarding user control, I suspect you could get at least "pause" functionality to work using the checkbox trick to disable animation if the box is checked. https://css-tricks.com/the-checkbox-hack/ https://css-tricks.com/the-checkbox-hack/
CosmicBagel 4y ago
Ran butter smooth on my old pixel 2 phone using Firefox.
heavyset_go 4y ago
Firefox that isn't properly GPU accelerated on Linux can do this, and you're likely to experience janky transitions if you're not using Firefox on Wayland, as well. I'm using Firefox on Wayland with an iGPU and the slider works smoothly on my end.
spartanatreyu 4y ago
It's janky because it was made 6 years ago and it uses CSS Floats (which are famously janky). Here's a similar codepen I made two years ago: https://codepen.io/spartanatreyu/pen/OJVVQRw https://codepen.io/spartanatreyu/pen/OJVVQRw It doesn't use floats, so it ends up being silky smooth. It could be simplified with today's scss/css, but it's still a decent demonstration of how smooth animations should be.
- ozten 4y ago
  Awesome work! +1 this looks silky smooth.
- lelandfe 4y ago
  The world of high performance CSS animation has not changed much in 6 years (or more![0]) Your demo is doing the same thing as the original – transitioning a `translateX` value. Indeed, I get a smooth, consistent 60fps from both, and a performance profile reveals that no paints occurred in the original! That's AKA "there is no way to improve this" So, I'm pretty sure float won't have any impact to performance, as the elements themselves don't reflow during the transition. [0] https://web.archive.org/web/20131109172325/https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ https://web.archive.org/web/20131109172325/https://www.html5...
  - spartanatreyu 4y ago
    The original is doing `translateX` yes, but it also has float in it. I can see the jank on my machine, and commenting out the float statements makes the jank disappear. Even though the elements aren't reflowing, there is something going on in the browser that is making it slow down. Strangely enough, recording the browser performance seems to "fix" the jank so long as the browser is recording. Perhaps capturing screenshots of the page every frame is forcing the browser to deliver frame updates at the correct time.
    - lelandfe 4y ago
      Here's a dead simple example, do you experience jank with it? https://jsfiddle.net/6etnpzyx/1/ https://jsfiddle.net/6etnpzyx/1/ Transform values (and opacity values, like your Codepen use) operate at the compositor level, and don't need to paint. That means that an element using those values with a float layout won't impact FPS – the transition is unaware that the element is floated. > recording the browser performance seems to "fix" the jank If Chrome is also exhibiting it, it has a passive FPS meter to record this. DevTools, Ctrl/Cmd-Shift-P, "FPS". I get a pretty steady 60FPS: https://imgur.com/a/lgntlpw https://imgur.com/a/lgntlpw
macNchz 4y ago
I recently disabled the "Use hardware acceleration when available" setting in Firefox on my machine (Ubuntu 22.04, Nvidia 1080ti) on a whim and discovered that it had been the cause of tons of jank on my machine, often bleeding over and causing super low fps in random other application windows, which I hadn't previously attributed to FF itself. Disabling that setting doesn't seem to have had any negative impacts on website performance...this slider is butter smooth, WebGL works fine, and 4K Youtube videos are smooth.

by ozten 4y ago

winrid 4y ago

Interesting, which GPU? On Windows, it's very smooth for me, but I have a 3090ti... Chrome's task manager says the page is using ~0% CPU, 20mb of GPU memory, and 90mb of ram.

another_story 4y ago
It worries me we're discussing gpus when it comes to an image slider.
- dspillett 4y ago
  A surprising amount of stuff that you might think it's done with just dumb bitmap rendering surfaces, is these days actually painted on graphics primatives with it all composited together by your GPU. It likely isn't using much more power than if running at entirely idle, often enough less than the extra a CPU might use doing the same job at a lower frame rate, displaying and updating your current desktop.
- Regnore 4y ago
  Why does it worry you? GPUs are designed to push pixels around. This a perfect use of them.
  - sgtnoodle 4y ago
    I think the concern is about the perception that you need hardware capable of drawing 200 billion pixels per second in order to render a webpage.
- heavyset_go 4y ago
  Most browsers are GPU accelerated.
ozten 4y ago
RTX 2070. Stock Ubuntu install, so maybe I need to optimize Firefox somehow.
- deleted 4y ago
  [deleted]

Cyberdog 4y ago

Working fine for me on both Safari and Firefox on an M1 Mac. Regarding user control, I suspect you could get at least "pause" functionality to work using the checkbox trick to disable animation if the box is checked. https://css-tricks.com/the-checkbox-hack/ https://css-tricks.com/the-checkbox-hack/

CosmicBagel 4y ago

Ran butter smooth on my old pixel 2 phone using Firefox.

heavyset_go 4y ago

Firefox that isn't properly GPU accelerated on Linux can do this, and you're likely to experience janky transitions if you're not using Firefox on Wayland, as well. I'm using Firefox on Wayland with an iGPU and the slider works smoothly on my end.

spartanatreyu 4y ago

It's janky because it was made 6 years ago and it uses CSS Floats (which are famously janky). Here's a similar codepen I made two years ago: https://codepen.io/spartanatreyu/pen/OJVVQRw https://codepen.io/spartanatreyu/pen/OJVVQRw It doesn't use floats, so it ends up being silky smooth. It could be simplified with today's scss/css, but it's still a decent demonstration of how smooth animations should be.

ozten 4y ago
Awesome work! +1 this looks silky smooth.
lelandfe 4y ago
The world of high performance CSS animation has not changed much in 6 years (or more![0]) Your demo is doing the same thing as the original – transitioning a `translateX` value. Indeed, I get a smooth, consistent 60fps from both, and a performance profile reveals that no paints occurred in the original! That's AKA "there is no way to improve this" So, I'm pretty sure float won't have any impact to performance, as the elements themselves don't reflow during the transition. [0] https://web.archive.org/web/20131109172325/https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ https://web.archive.org/web/20131109172325/https://www.html5...
- spartanatreyu 4y ago
  The original is doing `translateX` yes, but it also has float in it. I can see the jank on my machine, and commenting out the float statements makes the jank disappear. Even though the elements aren't reflowing, there is something going on in the browser that is making it slow down. Strangely enough, recording the browser performance seems to "fix" the jank so long as the browser is recording. Perhaps capturing screenshots of the page every frame is forcing the browser to deliver frame updates at the correct time.
  - lelandfe 4y ago
    Here's a dead simple example, do you experience jank with it? https://jsfiddle.net/6etnpzyx/1/ https://jsfiddle.net/6etnpzyx/1/ Transform values (and opacity values, like your Codepen use) operate at the compositor level, and don't need to paint. That means that an element using those values with a float layout won't impact FPS – the transition is unaware that the element is floated. > recording the browser performance seems to "fix" the jank If Chrome is also exhibiting it, it has a passive FPS meter to record this. DevTools, Ctrl/Cmd-Shift-P, "FPS". I get a pretty steady 60FPS: https://imgur.com/a/lgntlpw https://imgur.com/a/lgntlpw

macNchz 4y ago

I recently disabled the "Use hardware acceleration when available" setting in Firefox on my machine (Ubuntu 22.04, Nvidia 1080ti) on a whim and discovered that it had been the cause of tons of jank on my machine, often bleeding over and causing super low fps in random other application windows, which I hadn't previously attributed to FF itself. Disabling that setting doesn't seem to have had any negative impacts on website performance...this slider is butter smooth, WebGL works fine, and 4K Youtube videos are smooth.