I have this problem, I'm trying to work with animations, and everything works as I expect, even in the simulator. But the problem occurs if I take a physical device (Iphone). At that point the background zooms in, and after the animation is done, the div jumps to the left, as seen in the attached video. Video
Has anyone encountered a similar problem? Thanks
This problem only takes place on physical equipment and does not appear in emulators.
The problem occurs on iphone, both on safari and chromium browsers.
Repository code:
Code
I expect the div to stay in the position in which it starts to load when zooming, as shown by the emulators and desktop.
I fixed it by applying will-change: transform;
Related
I do not know how it has happened, because it worked properly at some point, but after doing some changes, I think to the main scroll container layer of the page, this started happening.
It is a weird visual glitch, I am not able of reproducing it, all that I can say is that the transition is a CSS transition with transform: translateX() and that while the transition is running both elements (new and old) get an absolute position that its remove once the animation ends. Also, there aren't any text-shadows in place.
I does not happen in firefox nor in chrome mobile, and it does not happen always, depends on if I have or not the developer tools opened, I think it might be because of the change in viewport resolution when those are open.
I have this issue as well;
fiddle
Seems it has to do with multiple layers of nested animations.
Its a bit to complicated to outline here!
I'm curious as to why this happens. It's most visible on Firefox, and on an iPad, but Safari also suffers from this a bit.
I've seen this in two spots.
I have a background picture, which is dark, and a white container on top of it which takes up 90% of the screen and contains all the content. On Firefox and on an iPad, If I scroll really quickly the white will disappear, then reappear.
I also have a navbar that once a user has scrolled 30 pixels from the top, it will add a class with a fixed position; it can't start out as fixed. On chrome it will work as expected, but on Firefox and Safari a delay will occur then the menu will be added.
The iPad seems to be due to this: iPad Safari scrolling causes HTML elements to disappear and reappear with a delay (currently haven't tested)
The content disappearing only happens when I scroll really quickly, but the menu will occur at a just a regular scroll rate; if I scroll really slowly it will work as expected.
Element appearing to blank during scroll
This is because sometimes the browsers can't render fast enough to keep up with the scroll. Rather than cause a janky scroll, they just stop rending anything until they can catch up. This is particularly likely to happen on mobile where you scroll really fast with just a flick of the finger, but resources are pretty low.
Navbar scroll event delayed
This depends on the browser, but again they are trying to ensure a fast scroll experience. One of the things they might do is refuse to do expensive onscroll events until after the scroll is mostly over. I also believe that refusing to do onscroll events allows them to do cool hardware acceleration that is beyond my ability to answer.
This html5rocks article is an interesting starting point for reading about how browsers do hardware acceleration.
I'm facing a problem I can't figure out how to solve. I'm almost sure this is a Chrome bug since in other browsers it works like a charm but I want to be sure. On my website, developed using a mobile first and responsive design approach, I have a menu that uses the Left Nav Flyout pattern. On Tablets and desktops, I show it full width.
When I load the website on my smartphone (specifically an Android device) using Chrome in Portrait mode, once I rotate the device (passing in Landscape mode) and start to scroll the page, as soon as I reach the menu position, the latter magically disappears. What is really strange is that if you try to click the space that now is completely white, you can see that the links are actually there. I tried to use the inspector to find the problem but didn't succeed.
So, wow can I solve the problem? Anyone else had this issue before? If you know it's a bug, I'm glad to add a temporary workaround as well.
I didn't find a real solution but a reasonable workaround. Of course, I still hope that someone will explain what's the cause of this issue and how to solve it.
In the meantime, I found that the problem occurs because the menu, 240px wide, is completely out of the viewport. In fact, as soon as I changed the margin-left to 239.5px the menu didn't disappear anymore.
My site crashes in Safari on iPad and on iPad only. I am animating a large picture (4800 x 374px, though only 336 kb) in the header with a css3 animation. After some ten seconds, this causes Safari to crash.
You can see the site at http://bakabaka.nl/preview/leuk/
Can I prevent this crash, and if so, how? Can I make the animation run smoother? It's very jagged now...
This is a shot in the dark, but maybe worth it.
What I would try is to use a 3D animation on iOS as it uses hardware acceleration:
-webkit-transform: translate3d(X,Y,Z);
See here for more information: '3D Transform Functions'
Also there can occur some problems with very large images on iOS. Maybe it would a better solution to cut them into pieces. Read more about it: "Know iOS Resource Limits"
I was experiencing something similar as well. For anyone else that might be banging their head against a wall, this was crashing Safari on both desktop and iOS. It really doesn't like that ::window-inactive selector.
::-webkit-scrollbar-thumb:window-inactive {
background: #f2f2f2;
}
I've noticed whilst optimising animations for use on iPad using hardware acceleration, I seem to be coming across an issue that I haven't fully been able to resolve. If you are applying webkit transforms such as translate, although the animation runs great, if in the middle of an animation occuring the user scrolls the page, when they release it causes the animation to stutter whereby it reverts to its original position and attempts to continue its animation to it's end point.
I've been looking everywhere for resolve on this issue, having seen it occur on the iPad store as well! If you have an iPad at hand and you navigate to, for example: http://webkit.org/demos/transitions-and-transforms/ , if you select an item then before the button animation has completed drag the page(scroll) then release it, you will see the animation flicker back to its original position and then repeat until its complete.
The only way I've been able to work around this is when a touchmove event occurs, I tell the animation to just stay where at its original location, which stops it from trying to repeat the transition on release, as even attempts to just tell it where to go again cause it to revert regardless (seeing as how css transitions seem not technically able to be stopped).
Has anyone found any workarounds to this issue, I'm pretty sure this is a bug on iPad as opposed to a problem with the animation (this does not involve issues regarding preserve-3d and what have you), or if I should be reporting this as an issue.
Thanks!
Not sure if I'm reading between the lines, but I suspect you might see better results if you use touchend versus touchmove or touchstart.