I'm experiencing a very annoying bug which appears in Safari 5.1 on Mac. Since this browser is still very common I need to support it.
JSFiddle: http://jsfiddle.net/QCvZt/2/
On clicking a button, a class is added to a containing element #chance. The stylesheet has rules that then cause the clicked element #chance-loose-card to animate away with transitions immediately and then, after a delay, #chance-card animates in.
They fade out and in with opacity, and I flip visibility to hidden when they're totally transparent, since in the full site they might otherwise be over top of things and capturing clicks meant for elements below.
This works very well in Firefox and Chrome (and Safari 6).
But in Safari 5.1 on Mac the first animation is happening as expected but then #chance-card isn't appearing. It's not until I hover over the #carousel element (presumably it's because it triggers another transition -- a button fading in) that #chance-card makes its appearance.
Now, given my assumption that it's to do with another transition being triggered, I tried forcing a transition to happen every second via a Javascript setInterval flipping a class on an element, causing it to transit back and forth. But this did not unfreeze the transition and make #chance-card appear. Transitioning a transform: translate instead of margin-left on the #chance-card doesn't help either.
As noted in the JSFiddle, reducing the transition-delay on #chance-card does make the bug go away, but for my use case this isn't an acceptable solution.
I wonder if anyone can suggest any workarounds? I haven't found anything which sounds similar in my searches.
I found a solution!
http://jsfiddle.net/QCvZt/4/
Changing the transition-delay of the visibility property to just less than the delays of the other properties fixes the issue. So it seems that if transitions are delayed, if visibility is hidden at the time when the transitions start (even if it's going to flip to visible at that same moment), the transitions don't start until somehow triggered (like in this case with the mouse over the grey area, though I don't know exactly the mechanism). Flipping visibility to visible just before the other transitions are due to start makes the problem disappear.
In this case I changed this (vendor prefixes omitted)
#chance.state-chancecard #chance-card {
transition: transform 0.5s, opacity 0.1s, visibility 0s;
transition-delay: 0.5s, 0.5s, 0.5s;
transition-timing-function: ease-out;
transform: none;
opacity: 1;
visibility: visible;
}
to this
#chance.state-chancecard #chance-card {
transition: transform 0.5s, opacity 0.1s, visibility 0s;
transition-delay: 0.5s, 0.5s, 0.49s; /* flip visibility just before other transitions are to start */
transition-timing-function: ease-out;
transform: none;
opacity: 1;
visibility: visible;
}
Related
In older versions of Edge, the desired transition effect works correctly.
I am simply animating a div by transitioning opacity/visibility with CSS when its parent's hover event is called.
//LESS
&:hover .inside{
//part that matters:
visibility: visible;
opacity: 1.0;
transition-delay:0s;
}
.inside{
//part that matters:
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 1s,opacity 1s ease;
}
//Pug
.wrapper
.button text
.inside more text
The problem.
In Chrome, IE 11, and Edge 25 the transition is consistent and correct. However, the transition events seem to be stacking up and making the opacity jump back and forth if I hover over or leave the button before the transitions complete naturally.
Here's an example of it: https://codepen.io/vtsells/pen/RZjLYP
Is this a bug or am I missing something? I find it odd that older versions of Edge work correctly
Your transition-delay:0s is causing the problems. Setting it to a very low value should give you a good result: transition-delay: 0.01s
Here's your working codepen.
I need some help with a 3d tranform. The transform is on the a:hover event and uses a:hover and a:before pseudo element to be transformed into a vertical flip, it's like a crad filp but it starts the flip at the base line of the menu, it should look like a cube flipping upwards. Here is the code on code codepen Please try and get this to work in Webkit and Mozilla and of course IE, please see what you can do.
the example i have is limited but it does work in FireFox and no other browsers so this would be better tested in IE and chrome first.example
PS. The pink a:before elements need to be transformed on a flat perpective surface at the bottom of the A tag and the a:before tag should animate upwards in place of the hovered anchor tag (-90deg I think), when it animate the pink tag shown in place of the first tag
You should post code rather than links. However, from your codepen I can tell you're not using vendor prefixes to support multiple browsers.
When you use transition, transform, etc you should write
-webkit-transition: all .3s;
-mos-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
See this SO question: Does Internet Explorer support CSS transitions?
I am animating a heading on a site and the animation is working in firefox but not in chrome.
I have the correct prefixes in firefox, if you use this code and switch the prefixes to moz it animates absolutely fine in firefox, heres the code for chrome:
HTML
<div class="page-header-con">
<div class="page-header">
<h1>test</h1>
</div>
</div>
CSS
.page-header-con {
perspective: 100px;
}
.page-header:hover {
-webkit-transform: rotateX(360deg);
}
.page-header {
-webkit-transition: all 0s ease 0s, all 1s ease 0s, all 0s ease-in 0s, all 0s ease 0s;
-webkit-transform: rotateX(0deg);
}
Am I missing something that is specifically needed for chrome?
Chrome doesn't seem to like the multiple transitions (not sure why you'd have them in the first place), so I kept removed all the ones that wouldn't do anything, aka all the ones with 0s duration. Firefox seems to ignore these other transition values
Updated jsFiddle
In addition, you need to play around with transform-origin (and the webkit prefixed version) in order to get the effect you desire. The default, for me is seems, in Firefox is top left, so if you want Chrome to look like that you need to put -webkit-transform-origin: top left; in the hover CSS for the element
More information on transform-origin
Hover over each ribbon and the svg will change colour. All seems good :)
http://codepen.io/anon/pen/qEILH
But, only the first ribbon gives the right result, the others seem to have a delay before the colour transition occurs and the ONLY difference between them are the values of href.
Why is this???
This seems only to be a problem on Chrome.
Are you talking about the transition from grey to white? Which version of IE are you using?
Try changing the .ico svg selector to: (delete the additional transition-duration, or set it to 0s)
.ico svg {
position: relative;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-ms-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0s;
fill:inherit;
}
I think it might have something to do with your other browsers not understanding transition-duration. But Chrome does, so it adds an additional 0.3s resulting in the delay.
-webkit-transition:background-image 0.6s ease-in;
-moz-transition:background-image 0.6s ease-in;
-o-transition:background-image 0.6s ease-in;
transition:background-image 0.6s ease-in;
On the above code, I've already tried safri,firefox and chrome, ONLY firefox doesn't work. I checked on the web, people say firefox is not support this, but I just want to be make sure, are there any other methods can be done in firefox, or else I have to create a javascript controlled animation just for firefox.
According to MDN, background-image transitions are not supported yet. However, you can fall back to using image sprites and animating the left property if you want sliding, or layers of images and animating the opacity property.