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
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/
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 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