I have found the solution to this issue. Instead of using translate for animations, use translate3d. There are some great new scrolling frameworks coming out these days, I recommend anyone dealing with transforms and touches dig around in their source code. http://github.com/purplecabbage/GloveBox has some great foundations and lead me in the right direction to use translate3d instead of transform. http://code.google.com/p/ghosttouch/ also contains some great code.
After figuring this out, I also found that Apple acknowledged this as a known issue and now considers the issue closed since there is a workaround - http://cubiq.org/scrolling-div-on-iphone-ipod-touch/5#comment-2601 Hope this helps everyone. After moving to translate3d, my scrolling is smooth as butter. ~Josh On May 14, 8:57 am, Remi Grumeau <[email protected]> wrote: > Any solution to that ?? > Having the same issue here… > > R. > > Le 15 avr. 2010 à 06:45,JoshG. a écrit : > > > > > > > I would love to know if there is a solution to this problem -- it is > > also apparent on the iPad. It shows up once transformations/ > > animations cross a relative threshold, that seems to be defined by > > three relationships -- the animation time, number of child elements, > > and "severity" for lack of a better word, of the tranformation -- ie, > > translating a div with 40 children 30 pixels on it's X axis over 2 > > seconds may not trigger the flash, but translating it 150 pixels > > might. > > > I was able to eliminate it in one situation by having an active > > placebo tranform on the element from page load translating it 1px over > > 30000 seconds (roughly 8 hours) -- in other words, doing nothing. > > Then, when I activated the actual transform I was "continuing" the > > original tranformation, and there was no flash of white. > > Unfortunately, subsequent transforms trigger the flash, since the > > second tranform completes, and there is no way to resume the placebo. > > (kicking it off again by using the webkitTransitionEnd event just > > causes the flash at that point.) > > > On Apr 14, 2:07 am, Remi Grumeau <[email protected]> wrote: > >> It happens here on the simulator too. > >> No hint no, sorry… > > >> Le 13 avr. 2010 à 23:44, dirkeinecke a écrit : > > >>> Hi, > > >>> I've the same issue ... and no solution. But an example: > > >>>http://www.dirkeinecke.de/_temp/slide-test/ > >>> (just working with iPhones because of "ontouchend") > > >>> I've figured out, that it depends on the number of elements in the > >>> sliding element. Page 1 has a list with 21 LI elements -> works fine. > >>> Page 2 has a list with 22 LI elements -> quick white flash before > >>> transform. > > >>> It seems, that this line in my script produces the quick white flash: > >>> fromPage.style.webkitTransform = 'translateX('+(isForwards == true ? > >>> '-' : '')+screenWidth+'px)'; > > >>> btw: The problem just happens on the iPhone, not in Safari or iPhone > >>> simulator. > > >>> Any hints? > > >>> Dirk > > >>> -- > >>> You received this message because you are subscribed to the Google Groups > >>> "iPhoneWebDev" group. > >>> To post to this group, send email to [email protected]. > >>> To unsubscribe from this group, send email to > >>> [email protected]. > >>> For more options, visit this group > >>> athttp://groups.google.com/group/iphonewebdev?hl=en. > > > -- > > You received this message because you are subscribed to the Google Groups > > "iPhoneWebDev" group. > > To post to this group, send email to [email protected]. > > To unsubscribe from this group, send email to > > [email protected]. > > For more options, visit this group > > athttp://groups.google.com/group/iphonewebdev?hl=en. > > -- > You received this message because you are subscribed to the Google Groups > "iPhoneWebDev" group. > To post to this group, send email to [email protected]. > To unsubscribe from this group, send email to > [email protected]. > For more options, visit this group > athttp://groups.google.com/group/iphonewebdev?hl=en. -- You received this message because you are subscribed to the Google Groups "iPhoneWebDev" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/iphonewebdev?hl=en.
