I created a flipbook animation and have tested it in Chrome, Firefox, and Safari, and you can see it in action here:
http://codepen.io/tcmulder/pen/omyuE
Unfortunately, it isn't working correctly in Safari because after the animation concludes, z-index seems to lose it's power and the leftmost page repositions itself at the top of the stack. It may be related to the issue found here:
css z-index lost after webkit transform translate3d
but the solution suggested doesn't work. I also played around with using rotate3d to change the x coordinates to trick it into a sort of pseudo-z-index overlay, but this doesn't seem to work well either.
How can I get Safari to preserve z-index after the animation concludes?
Related
I've been working on a simple parallax scrolling for my website and noticed that svg's don't seem to be working that well with firefox. After turning the svg's into a font there was an improvement across all browsers but the troubles with firefox still remain. All the elements are that have parallax effects are done so with a trasnform3d() but firefox appears to repaint every time the svg or glyph in the font is transformed.
The parallax works as expected and smoothly on all other elements but vector images seem to trigger firefox to repaint.
Note: This only occurs on firefox.
I am working on a simple css animation of the clip-path property, using the basic inset shape to create a sweep effect. This works well in Chrome and Firefox but not in Safari.
If I resize the window of Safari, or do something else forcing a redraw, it does render the current state of the animation. So it seems to be an issue of the animation not being redrawn properly.
I believe you need to prefix clip-path with my -webkit-, and i have done so.
I am using the latest version of Safari: 12.1.1
Here is a fiddle illustrating the problem:
https://jsfiddle.net/vwth9mjr/
I would expect the animation to work as it does in Chrome and Firefox.
Safari shows no error messages.
Update .pane css from fixed to absolute seems to works:
https://jsfiddle.net/d32bm6jo/5/
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 have seen various mentions of a bug involving overflow:hidden and border-radius in Chrome around the web but none seem to have a solution that works for me.
I've put the relevant code here: http://codepen.io/jolora/pen/MadgQm
The hover transition effect works fine in Safari and Firefox but bugs out in Canary (v49. Chrome v46 is working fine).
If I remove the overflow:hidden rule from .service the hover works as expected. I'm using a blur filter though so I need to clip the blur somehow - I don't want it bleeding out the edges of the parent.
Screenshots:
Safari on hover (as it should look):
Canary on hover (the background of .service shows through in a square only during the transition period of 0.25s):
Any help would be greatly appreciated. Thanks!
What issue are you seeing and what should it look like? It looks alright to me in Chrome (not Canary)
With overflow:hidden -
Without overflow:hidden -
Check this codepen: http://codepen.io/anon/pen/KkgeL/.
How come it's so glitchy when animating it? I'm on Chrome v.33. Works perfectly fine in Safari and Firefox (Safari glitches the same way as Chrome [read below], but instead of the width it's the height).
edit: I can try to explain the glitch for those of you who don't see it. It animates all properties somewhat OK, but at the very end of the animation, the width of the 3 divs instantly changes by a handful of pixels which is very, very undesirable.
For those of you who use Chrome and doesn't see the glitch please comment with your Chrome version.
I'm not sure yet of what is this about, but I added a delay on the transition of .logo > div and the problem was solved but I don't know if you can retain this transition.
Try it and let me know
-webkit-transition-delay: 1s;.