search

Plastikit / plastik-collapsible

List of collapsible and expandable items.
3 stars 0 forks source link

Flicker on iOS and janky response on Andriod #1

Open devAtPolydeals opened 9 years ago

devAtPolydeals commented 9 years ago

Hi,

In iOS devices i get a flicker or a very fast flash and on andriod devices the scrolling is not responsive

thanks!

adalinesimonian commented 9 years ago

Hello, @devAtPolydeals!

Goodness, pardon my late reply. Somehow I had managed to miss this issue. :(

Right at the moment I'm heading off to hit the hay since it's a little late here, but I'd be glad to investigate this tomorrow. Do you have any further details that may help? My testing platforms have been limited: I don't have an iOS device, so I can't speak for iOS, and I have only tested plastik-collapsible on Android on a 2nd-generation Moto X.

Thanks again!

devAtPolydeals commented 9 years ago

I tested it on iPhone 6 with latest version of iOS and Samsung Galaxy with latest Andriod & chrome version. On android device if i expand everything I have and then try to do vertical scroll i cannot for few secs and then it gets back, basically scrolling becomes prohibitive. On iOS there is flicker or sudden flash when u open/close. You may be using translate3d which flickers on ios since it does not provide hardware acceleration see http://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform.

adalinesimonian commented 9 years ago

Actually, this element is rather naughty: it doesn't use transform at all and animates the heights of the items. Originally, I did this as a simple way of ensuring all the elements were always at the right position and that the collapsible itself was always of the correct height. But, it seems there are consequences in terms of performance.

At first thought, I think this will require changing the plastik-collapsible logic to use transforms and smartly apply them to all the elements after calculating where everything should be.

I'll go ahead and work on this and see what I can come up with. If you have suggestions or you think there's a better way of going about it, I'd love to hear from you on it.

devAtPolydeals commented 9 years ago

btw you can use https://crossbrowsertesting.com/ to check behavior on diff browsers and OS Also I am using https://github.com/filaraujo/akyral-details element for open/close. See it in action here: https://sizzling-fire-7471.firebaseapp.com/#!/faq This element works good but flickers in iOS due to no support from translate3d