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.
Related
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/
All verisons of IE this transition won't work. If you use this codepen on Safari, Firefox, Chrome, the transition works on page load. We're simply removing a class that has a transform translate. It should transition to the original transform translate. Why won't this work for IE, period?
$('.js-cat-nav-fixed-expanded').removeClass('cat_nav_expanded_close');
http://codepen.io/Wolfmans55/pen/rOGZoQ
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;.
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 created css3 menu. Link is here http://test.partnuz.hekko.pl/eliticon/1032px/ . Although it correctly renders the transition in opera, it sometimes shows the bottom border and sometimes not. Any solution ?
Link to css code is http://test.partnuz.hekko.pl/eliticon/1032px/css/dropdown.css