I'm experimenting with css animations on an iPad. I'm finding that while an animation is happening (.e.g a rotating div), if the user is touching the screen currently running animations get choppy and new animations don't start till the user stops touching. I'm assuming that iOS isn't updating the dom while the user touches or a scroll is happening.
Is there some trick to force Safari to continue drawing while the touch or user action is happening?
Related
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;
Using multiple createjs canvas stages on a web page.
Every time I scroll the page, on iOS Safari and Android Chrome, all the stages are cleared and repainted again (causing a long flicker).
Is there a way I can avoid the repaint on every scroll ?
I have never seen this. Is something resizing your canvas on scroll?
Resizing a canvas element will result in the canvas getting cleared. You can try doing a state.update() when the scroll happens.
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.
How do I remove the swipe animation when changing pages in Safari based browsers? (Safari both for iOS and OSX have this).
I have a website that uses ngAnimate to animate between pages. The problem is that every time I swipe on the phone or on a touchpad to go back in Safari, Safari plays a built in animation first.
Is there a way to remove this animation?
I'm trying to develop a slideshow plugin for a project, but I'm running into issues with the CSS3 animations/transitions.
You can view it here:
http://jsfiddle.net/75Sjb/
What I'm trying to do
Each slide has both transform: translate3d(-100%,0,0) and transition: all. This way, slides that aren't active are just outside of the view, to the left, and are ready to be moved around smoothly.
The active slide also has an animation whose from portion says transform: translate3d(100%,0,0), as well as a new transform property in their CSS as translate3d(0,0,0). So they animate from just right to being snug in the view.
The problem
In Webkit
Although the first time picking a slide is animated properly, every other one after that is botched. The slide going from active to inactive doesn't animate out.
In Firefox
In Firefox, the slide going from active to inactive is fine; but the active slide slide in from left (the animation isn't working).
Perhaps this was an issue with older versions of the browsers, but the animation is working fine now.