emberjs / list-view

An incremental rendering list view for Ember.js
MIT License
465 stars 116 forks source link

applyTransform should also use translate3d #235

Closed daem0ndev closed 9 years ago

daem0ndev commented 9 years ago

As a performance optimization on some mobile browsers, use translate3d if device supports3d.. Currently this is only done on apply3DTransform which is only used by VirtualListView. The standard ListView should also do the same logic...

tim-evans commented 9 years ago

I think there was a reason for this. Would anyone like to shed some light on this decision?

stefanpenner commented 9 years ago

I think this was working around visual artifact issues. Maybe @krisselden can shed light

daem0ndev commented 9 years ago

very cool, thanks for the quick feedback! hope to hear from @krisselden...

in my specific use case, I was getting parts of my list items completely blanking out and not redrawing when scrolling on a nexus 5 android phone. Using translate3d resolved the issue and actually made it quite a bit more fluid.

Additionally, I would love to have used VirtualListView, but its severely broken on this same android phone in question. The scroll is not fluid or momentum at all, and it only goes one list item at a time it feels like, no matter how long or intense the swipe is.

daem0ndev commented 9 years ago

at worst, I would also even propose making it a configurable option per list view instance... I dont mind doing the commits if I get the go ahead from you guys!

stefanpenner commented 9 years ago

@daem0ndev I know yapp where @krisselden and @lukemelia work uses virtual on android. I am surprised you are having issues

lukemelia commented 9 years ago

I just checked out code, and we have the following monkeypatch:

if (isAndroid) {
  VirtualRowView.reopen({
    applyTransform(element, position) {
      let {x, y} = position;

      element.style.top = y + 'px';
      element.style.left = x + 'px';
    }
  });
}
krisselden commented 9 years ago

@daem0ndev there was a chrome bug with compositing, mac scroll bars, and 3d transforms that would composite the render buffer on top of the scroll bars. I haven't checked recently to see if it has been fixed.

daem0ndev commented 9 years ago

I am using latest chrome on Mac and everything seems just fine ;) can we try revisiting this?

fivetanley commented 9 years ago

I checked out the demo on OSX and Chrome as well, seems good.