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/
Related
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;.
If you view this codepen demo in Chrome and scrolldown you should see a piechart animation kick in when it comes into view. Yet in Safari Version 7.0.2 (9537.74.9) it doesn't. Any ideas why this isn't working in Safari?
http://codepen.io/s10wen/pen/czDbu
This is a Safari rendering bug triggered by backface-visibility: hidden on the .pie-chart > :last-child em. That line doesn't appear to be necessary, everything works fine without it.
This example doesn't have the bug: http://codepen.io/anon/pen/ktKmu.
I discovered this by removing bits of CSS & JavaScript until the bug no longer happened, revealing the single line that was causing it. Reduction ftw!
Im making a photogallery, and it works nice in all browsers but Firefox!
In all other browsers but Firefox the page looks like it should, but in firefox it's like the transition effect in CSS on the little examples of the images doesnt work!
I does something weird with opacity..
In the CSS for the little examples of the image, I have an opacity set to 0 in order for the CSS to animate opacity to 1 to make the examples fade up on page load.
If that opacity 0 is set to 1, the transition effect works in Firefox, however the animation is not working as it should...
The CSS code I have for animation and transition is exactly the same for Chrome, IE, Safari and Firefox.. Just used -moz- for Firefox instead, so I can't figure out why it acts different in different browsers.
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?
I have been working with changing the background colour of an element using css3 animations. However it does not work in Chrome. I have attached a jsFiddle example of the code I am using. It works in Firefox, but not in Chrome and despite my best efforts I have been unable to work out what the problem is.
In chrome is seems to ignore the reference to background-color only. If I move the item or apply any other effect to the element it works fine.
http://jsfiddle.net/qWKEs/6/
Thanks in advance.
This is a bug in chrome. Should be fixed in version 18 as per http://code.google.com/p/chromium/issues/detail?id=101245
I had this same issue using the background property in Chrome with CSS3.
However the version of Chrome is 21.0.1180.83 (up to date as of 8/24/12) so the problem still exists.
I resolved it by specifying background-color instead and that works fine.
Interestingly enough the W3C says it's only supported in version 1.