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!
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/
I'm having a strange issue with transitions and transforms in Safari in the sub-900px media query in desktop and iOS. They mostly work well, with the exception of the a.logo element on this site:
http://eclipseinterface.com/#welcome
It feels like the transition happens with all of the other elements, but the transform property just pops into place when the transition ends.
I've tried advice on SO that wants me to vendor prefix the translate parameter as well, but that seems to make no difference.
Any thoughts? I've been picking at this bug for a few hours now :(
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´m testing my newest design and there is one specific issue I cannot figure out.
It appears that a specifik element is triggering an opacity change when I hover the element.
According to my tests this only occurs in Firefox and IE. It doesn´t happen in Chrome.
My best guess is that this is happening due to some sort of browser specific CSS but I have not been able to locate any CSS on any of the elements that is causing this opacity change.
One of the problems is also that I normally use Chrome F12 when I need to spot source code issues and hover CSS effects are hard for me to locate in Firefox and Chrome.
Here is a link to my test-site where you can see the problem in Firefox and IE when you for instance open the accordeon tab "Vælg Stof Indvendig" and hover the images:
http://www.geniusdesign.dk/Demoer/Tailoredsuits/design-dit-eget-jakkesaet/design-selv-jakkesaet-detaljer
You have css that says the following: .product-field-display:hover { opacity: 0.5; }
Because the .product-field-display element is a span wrapping div's, Chrome is basically making it a non-element (height/width of 0 and no placement on the page). But Firefox is still reacting to it (I guess IE is too).
I can't see your site, but have you used a reset at the top of your CSS? This usually solves problems like this. Some browsers s=do weird things by default!
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.