I'm using transitions to move text when their parent element is hovered. However, the transition is not reversed when testing in Safari. This results in the text quickly jumping back to the beginning if you stop hovering the parent element before the transition has finished. If you do this in Chrome, the transition reverses back to the beginning.
Can this be fixed in Safari in some way?
GIF showing Safari & Chrome comparison
Safari not reversing clearification
Overview of CSS:
.infoContainer {
display: inline-block;
position: absolute;
transition: bottom .5s ease-in-out;
-webkit-transition: bottom .5s ease-in-out;
bottom: 1rem;
}
.body:hover .infoContainer {
bottom: calc(100% - 1.8rem - 1.3rem - 1rem);
}
Running Safari Version 16.1 (18614.2.9.1.12), Chrome Version 108.0.5359.98.
Expectations and attempts:
I was expecting the transition to be smoothly reversed like it is in Google Chrome. I've tried using the following CSS without success.
-webkit-transition: bottom .5s ease-in-out;
I can't comment so I will write my answer here.
You can add this
.infoContainer {
display: inline-block;
position: absolute;
bottom: 1rem;
transition: bottom .5s ease-in-out;
-webkit-transition: bottom .5s ease-in-out;
transition-delay: 1ms;
-moz-transition-delay: 1ms;
-webkit-transition-delay: 1ms;
-o-transition-delay: 1ms;
}
It should help on safari ;)
Related
I have a form that changes border color(red-green) if the inputted values are correct or not - I also change between two small icons (glyphicon-ok and glyphicon-remove) at the end of each field.
I wanted to add a transition effect on the border color and icons(ease-in-out).
On the border color works perfectly but I noticed on the icons even though I set 'ease-in-out' the very first transition it's still 'linear' - the icons come in from the bottom like something pushes them up - I want them just to simply appear with a 0.2s transition.
Here is my css for the icons:
.start-label .glyphicon-ok {
position: absolute;
font-size: 25px;
top: 19px;
right: 10px;
color: #ACCB71;
transition: 0.2s ease-in-out;
}
.start-label .glyphicon-remove {
position: absolute;
font-size: 25px;
top: 19px;
right: 10px;
color: #CC3E44;
transition: 0.2s ease-in-out;
}
I have only these transitions in my entire css code with the border ones.
The transition for the border is the following:
transition: border 0.2s ease-in-out;
What am I doing wrong here? Or this is how it supposed to work?
Thanks to Dorvalla's help I resolved it by specifying the transition on the color.
From:
transition: 0.2s ease-in-out;
To:
transition: color 0.2s ease-in-out;
.posts .img-hover:before {
content: '';
display: block;
opacity: 0;
-webkit-transition: opacity 1.2s ease;
-moz-transition: opacity 1.2s ease;
-ms-transition: opacity 1.2s ease;
-o-transition: opacity 1.2s ease;
transition: opacity 1.2s ease-out;
}
.posts .img-hover:hover:before {
content: '';
display: block;
background: url("img/Texture1.png");
width: 320px;
/* image width */
height: 220px;
/* image height */
position: absolute;
top: 13px;
right: 2px;
opacity: 1;
}
<div class="posts">
<a href="#">
<h2 class="postname">
Travel Flashback #1 </h2>
</a>
<a class="img-hover" href="#">
<img width="960" height="720" src="http://.." class="img-hover" alt="" />
</a>
</div>
I have one problem with this code. As you see I want transition over pseudo element ::before, which has bkg img.
When I hover on, transition works smoothly, but when I leave mouse, bkg img goes away immediately without transition.
Can you please suggest something?
On the hover you probably only want the css related to the transition, not the actual styles for the pseudo element. Try this
.posts .img-hover:before {
content: '';
display: block;
background: url("img/Texture1.png");
width: 320px; /* image width */
height: 220px; /* image height */
position: absolute;
top: 13px;
right: 2px;
opacity: 0;
-webkit-transition: opacity 1.2s ease;
-moz-transition: opacity 1.2s ease;
-ms-transition: opacity 1.2s ease;
-o-transition: opacity 1.2s ease;
transition: opacity 1.2s ease-out;
}
.posts .img-hover:hover:before{
opacity: 1;
}
For others browsing through this forum, I came to this thread with exact same problem, I tried to switch transition focus from
opacity 0.35s ease-in-out
to:
all 0.35s ease-in-out
and issue was resolved.
My browser is Chromium version 80.0.3987.162, Debian Linux 10.4
My issue was actually that the transition did not work at all. The element appears and disappears instantly. For those with a similar problem and came here, I believe CSS ignores the on-hover transition for an empty element even if the content will be added on hover and the reason it doesn't transition when you hover off is because the content is removed immediately.
Instead of
elem:before{
opacity:0;
transition: opacity 1.2s ease-out;
}
elem:hover:before {
opacity:1;
content:'something';
}
move content to elem:before
elem:before{
opacity:0;
content:'something';
transition: opacity 1.2s ease-out;
}
elem:hover:before {
opacity:1;
}
If you want the content only on hover but you want to transition another property (like width) and opacity can't be used, content: ''; should work on hover but remember to keep the property even when you hover off.
To answer OP's question and why the solution by ynter works it's because the background disappears once they hover off. Keep the background in the :before element.
I'm getting strange behaviour occurring in Safari on OSX and more noticeably on iOS with this CSS driven radiobox multi-select form I'm working on...
http://s.codepen.io/achisholm/debug/jPzzzB
Same page with editors visible...
http://codepen.io/achisholm/pen/jPzzzB?editors=110
During the .3s transition, notice the width of the multi-form__option-content element seems to go from 0 to 100% while opening and closing.
It doesn't happen on any other browser, only Safari. Why is this happening and how can I prevent it?
You could change transition: all .3s ease; to transition: height .3s ease;
&__option-content {
overflow: hidden;
transition: height .3s ease; /*this one*/
height: 0;
padding: 0 20px 0px 50px;
line-height: 1.6;
http://codepen.io/anon/pen/MwVXNb
I want to make an expandable block using css transitions.
.box {
width: 300px;
max-height: 30px;
overflow: hidden;
background: #aaa;
-webkit-transition: max-height 400ms ease-in-out;
-moz-transition: max-height 400ms ease-in-out;
-ms-transition: max-height 400ms ease-in-out;
-o-transition: max-height 400ms ease-in-out;
transition: max-height 400ms ease-in-out;
}
.box.open {
max-height: 999px;
}
Here's working example: http://jsfiddle.net/qswgK/.
When I expand the block, it slides down well, but when I want to collapse it, it occurs with some latency.
This is noticed in lastest versions Chrome, Firefox, Opera and IE.
Why does it happen and May I avoid this without using javascript animations?
P.S. If use height animation instead of max-height, collapse works well, but I need collapse and expand block with unknown expanded height.
It looks that it happens because the collapsing animation starts to change the max-height from the very large value and it takes to it some time to cross the actual height of the element, and the visible change of the height starts only after that moment. The only workaround I see is to use separate animations for expansion and collapsing — a bit longer one with easing-in for the first and a bit shorter one that starts very sharply and eases out just before ending for the latter, like the following:
.box {
width: 300px;
max-height: 30px;
overflow: hidden;
background: #aaa;
transition: max-height 300ms cubic-bezier(0, .6, .6, 1); /* for collapsing */
}
.box.open {
max-height: 999px;
transition: max-height 400ms ease-in; /* for expansion */
}
fiddle
I'm new to CSS and now facing a problem which I can't get rid of.
I made an animation using css3 keyframes. This animation simply changes the rotation of an image whenever someone hovers it. Now I wanted to link this image to a website, but the way I did it, the animation doesn't run at all.
<div class="tunein"><a href="http://www.google.com/">
<img src="https://www.google.com/images/srpr/logo3w.png"></a></div>
.tunein{
position: absolute;
top: 40%;
left: 10%;
display: block;
-webkit-transform:rotate(12deg);
-moz-transform:rotate(12deg);
}
.tunein a:hover{
animation: rotate 0.5s ease-out;
-moz-animation:rotate 0.5s ease-out;
-webkit-animation:rotate 0.5s ease-out;
}
js fiddle for you:
http://jsfiddle.net/9jMqc/
When i add the class tag into the a-element, the offset changes dramatically but the animation works.
I'd propose moving the events onto the <a> link, so moving them as per http://jsfiddle.net/9jMqc/2/
.tunein a {
display: block;
-webkit-transform:rotate(12deg);
-moz-transform:rotate(12deg);
}
.tunein a:hover{
animation: rotate 0.5s ease-out;
-moz-animation:rotate 0.5s ease-out;
-webkit-animation:rotate 0.5s ease-out;
}
I think you were perhaps missing display: block on the <a> link previously - Just for reference, you shouldn't need to use display: block on <div></div>'s as that's their default unless otherwise declared in your CSS.