3 ms·

> What's frustrating is comments like yours that describe things that the Web can clearly already do and blame browsers for supposedly being unable to do simple

by Touche 11y ago

> What's frustrating is comments like yours that describe things that the Web can clearly already do and blame browsers for supposedly being unable to do simple things. I used to think the way you did—that the Web is incapable of rendering a 60 FPS scrollable view—and then quickly discovered that, if optimized properly, there is actually no problem. I think you misunderstood the widget I'm describing. It is swipeable meaning I swipe to pull the sidebar into view and swipe to push it out of view. If I stop half way the sidebar stops where my finger stops. Meaning the sidebar has to follow my finger, at 60fps, as I quickly swipe in and out. If such a thing is as easy you claim then a quick demo should be easy enough. I know of no such sidebars on the web that fit this requirement, but am happy to hear all of those devs (and myself!) are just terrible at their (my) jobs.

pcwalton 11y ago
> Meaning the sidebar has to follow my finger, at 60fps, as I quickly swipe in and out. If such a thing is as easy you claim then a quick demo should be easy enough. So what you want to do is to install a touch event handler and adjust a transform. Assume that the sidebar is pre-rasterized to a layer via will-change. In this case, the DOM manipulation is going to be 1µs or so. Style recalculation, 1ms at most (this is a huge overestimate). Layout is skipped since you are animating a transform. Paint is skipped since you're animating a transform, the element is layerized, and all tile contents are cached. Compositing, 3ms at most (also probably a huge overestimate). Even with the most pessimistic possible numbers, I can't get anywhere near 16ms for this workload.
lhecker 11y ago
Does this suffice? http://www.jqueryscript.net/demo/Responsive-Fluid-Sidebar-Plugin-with-jQuery-Hammer-js/ http://www.jqueryscript.net/demo/Responsive-Fluid-Sidebar-Pl... You need to use a Smartphone for the Demo above though (i.e. sth. that can produces touches and has a small enough screen), but it was the first thing I found by googling "hammerjs sidebar". I'm sure that if you look at a few demos from hammer.js (which is a very - maybe the most - popular touch library) you'll understand why everything you always wanted has already been solved years ago - just not in a very easy way. But it seems that didn't stop the world from writing libraries that make swiping, panning, and fluid 60fps easy to achieve. Just like with any other language, framework, etc. you just need to learn it well enough...
- xg15 11y ago
  > Does this suffice? The example is broken in Chrome 47 on Android 6.0.1: Once I touch the menu putton, the sidebar immediately extends fully. Then i need to swipe right-to-left multiple times to retract it again.

by Touche 11y ago

pcwalton 11y ago

> Meaning the sidebar has to follow my finger, at 60fps, as I quickly swipe in and out. If such a thing is as easy you claim then a quick demo should be easy enough. So what you want to do is to install a touch event handler and adjust a transform. Assume that the sidebar is pre-rasterized to a layer via will-change. In this case, the DOM manipulation is going to be 1µs or so. Style recalculation, 1ms at most (this is a huge overestimate). Layout is skipped since you are animating a transform. Paint is skipped since you're animating a transform, the element is layerized, and all tile contents are cached. Compositing, 3ms at most (also probably a huge overestimate). Even with the most pessimistic possible numbers, I can't get anywhere near 16ms for this workload.

lhecker 11y ago

Does this suffice? http://www.jqueryscript.net/demo/Responsive-Fluid-Sidebar-Plugin-with-jQuery-Hammer-js/ http://www.jqueryscript.net/demo/Responsive-Fluid-Sidebar-Pl... You need to use a Smartphone for the Demo above though (i.e. sth. that can produces touches and has a small enough screen), but it was the first thing I found by googling "hammerjs sidebar". I'm sure that if you look at a few demos from hammer.js (which is a very - maybe the most - popular touch library) you'll understand why everything you always wanted has already been solved years ago - just not in a very easy way. But it seems that didn't stop the world from writing libraries that make swiping, panning, and fluid 60fps easy to achieve. Just like with any other language, framework, etc. you just need to learn it well enough...

xg15 11y ago
> Does this suffice? The example is broken in Chrome 47 on Android 6.0.1: Once I touch the menu putton, the sidebar immediately extends fully. Then i need to swipe right-to-left multiple times to retract it again.