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.
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've been unable to solve stuttering in Chrome/Opera when using transitions - e.g. opacity, transform, filter etc.
For simplicity, I will focus on opacity.
Live example here:
http://www.lydkontoret.dk/index.php?pgId=20&pgName=Lyd+%26+lys
When you click on one of the pictures below the banner, a large version is displayed. I do this by adding a fullscreen div on top of page to prevent access to page elements. The div is faded in via transition on opacity. On top of this div is added further divs that holds the image.
Notice the opacity transition for the fullscreen element when clicking on a picture. On a 24" monitor with browser window maximized, chrome/opera stutters like crazy, while firefox/msie/msedge is reasonably smooth.
To complicate matters, Chrome/Opera performs ok when browser window is smaller - as rendering engine apparently is able to cope.
I've tried using will-change and translateZ(0) on the various elements involved, but chrome just doesn't care (removing the banner helps a lot - as expected, because the rendering engine then has less to deal with).
Also it's mostly the fade in that stutters. When closing the image display, transition on fullscreen element back to fully transparent often looks acceptable.
I figure my coding is ok, as Firefox etc. do the various transitions nicely. So why the problem with the blink engine used by chrome and opera?
Any thoughts??
I have an element with a -webkit-filter: blur(10px); applied to it. I'm using a CSS animation to move the element up and down with it's translateY property. When the element is animating or transitioning the blur remains but the edges become hard. When the animation or transition ends the the edges become blurred again like they're suppose to. I made a demo that shows examples of the notes that follow it.
Demo: http://jsbin.com/bofahekuko/1/edit?html,css,output
I Tried Fixing it With:
adding -webkit-font-smoothing: subpixel-antialiased; to the animating element.
forcing hardware acceleration on the animating element and adding backface-visibility: hidden on the parent
Things of Note
Happens with both CSS transitions and animations
If you move the element up and down via the CSS top property the blur filter renders correctly.
Browser Testing
Bug appears in Google Chrome (running Version 50.0.2661.86 (64-bit)) as well as in Canary.
Both Firefox and Safari (iOS and Desktop) correctly render the blur filter during the animation.
I'd really like to be able to run the animation with the translateY transition property instead of the top property. If there really isn't a fix it'd still be interesting to know what exactly is going on here to cause the problem.
Thanks in advance for any help on this.
This is a problem that's probably caused by hardware accceleration - the GPU is just moving the original blurred content without updating its background.
To fix, don't use translate or use another trick to disable hardware acceleration (like simultaneously animating margin or padding)
I'm trying to get this http://wrapbootstrap.com/preview/WB07061TJ template to animate sidebar under Firefox (other browsers works fine). I figure out so far that firefox needs left to be set explicitly Firefox transitions not working
I tired to add left to all possible combination and elements but still no slide animation.
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?