Smarter hardware acceleration #2377
Conversation
this fixes gaps between tiles in Safari and makes iOS Safari butter smooth when zooming
|
Awesome, will test on our IE 10 touch device and get one of the guys to test on their Nexus 5. |
|
Thanks Dave! Also, let me know if you have any ideas about the stretching issue, which is just incredibly weird — there's got to be a way to overcome this... I'd love to make this patch work consistently under iOS. |
|
IE10 touch seems fine. Everything seems really bugged on iOS as you say above :S |
|
But try panning further and it stops to be bugged, while still being butter-smooth. Do you see the same behavior? |
|
Yep, and its really really weird! |
|
OK, it looks like I have found a workaround: this._tileContainer.style.width = window.screen.width + 'px';
this._tileContainer.style.height = window.screen.height + 'px';
this._tileContainer.style.WebkitTransformOrigin = '0 0';I was right that it has to do with element dimensions — Safari stops bugging when composited element size comes close to screen size. This makes no sense, but seems to fix all problems. So going to make a commit and ask everyone to test. |
|
Nope, I was wrong, iPhone still bugs out :( |
|
BUT, iPhone doesn't bug out if you set the size to bigger values like 1440, 900, LOL. Apparently there's some weird hack in Safari HW code somewhere. |
|
OK, this should be good to go pretty much. Works well for me on iPhone 5s, iPad 2 & Safari OS X. |
ghost
assigned
|
What does chrome on iOS get identified as? Fiddling now :) |
|
Seemed good in my testing, even chrome on iOS worked fine. |
|
Nice! @danzel did you also notice a performance improvement in your testing? |
|
I don't have any old devices on hand to test with, everything seemed super smooth. |
This kind of reverts #2377 that doesn’t make sense after tile animation refactorings, because it makes Safari terribly slow. It reintroduces the tile gaps, but oh well, we choose the lesser evil here. Also, performance in latest iOS is the same with and without the patch so there’s no harm in removing this.
I had to resort to a very obscure hack to fix things in Safari — previously the tile layer was stretching weirdly after panning to the right or bottom. After the hack (putting a 1px translated element in the top corner), it doesn't happen much, BUT sometimes still happens, and we need to fix that. Easy way to reproduce is opening
vector-simple.htmlin iPad and pan just slightly south so that new row of tiles gets loaded. It will stretch vertically, but if you keep panning, things will get back to normal. This is driving me nuts.update: still bugs out on iPhone 5s even with the hack. But what's interesting is that the bug only happens on the first pans, and stops appearing when you pan further. So maybe HW accel switches to some different mode when the element becomes bigger, and we need to figure out how to trigger this mode from the start.
update2: one more clue: doing this hack to force tile container redraw fixes the bugs but introduces flickering.
update3: fixed it with another hack (setting tile containers to 1600 width/height)
Also needs to be tested across devices (I'm especially interested in Android & IE11) — any help appreciated.
cc @danzel @jfirebaugh @tmcw