I'm using the following to animate a hover transition:
a {
letter-spacing: 1px;
transition: all .5s ease-in;
}
a {
letter-spacing: 2px;
}
Here is a jsBin.
At first I didn't expect this to be pretty but was pleasantly surprised when I saw how smoothly it was animated in Chrome. Even though it only changes 1px in the spacing, somehow Chrome gives the illusion of a smooth transition.
In Safari though it just jumps from 1px to 2px without that nice smoothing effect.
Is there any way to get the same effect in Safari?
(Alternatively, is there a CSS-only way of disabling this in non-Chrome browsers?)
I mis-read the entry for letter-spacing in the list of CSS Animated properties. In actual fact, any type of length unit is able to be used with the letter-spacing animation. It appears that Safari doesn't smoothly animate a 1 pixel difference - a bug.
The solution for small letter-spacing animations cross-browser is the use of em units and also a smaller delay of .1s to get a smooth transition. Safari does not have as smooth an animation for small letter-spacing animations, but it is passable.
Updated example jsBin with an em unit (Tested and working in Safari, Firefox, Chrome)
CSS
a {
letter-spacing: 1px;
transition: all .1s ease-in;
}
a:hover {
letter-spacing: 0.2em;
}
Available browser prefixes (if needed):
-webkit-transition: all .1s ease-in;
-moz-transition: all .1s ease-in;
-ms-transition: all .1s ease-in;
-o-transition: all .1s ease-in;
transition: all .1s ease-in;
to disable it, use your code like this:
#media screen and (-webkit-min-device-pixel-ratio:0) {
a {
letter-spacing: 1px;
transition: all .5s ease-in;
}
a {
letter-spacing: 2px;
}
}
this will disable your code in any non-webkit browser (thus, will only work in Chrome and Safari). Other than that, your code works fine, Webkit has just better smoothing engine, nothing else, but Firefox and IE handle it without issues, so really don't know what are you seeing in terms of differences
Related
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 ;)
Here is the project I'm working on (code copied exactly except for names changed, etc.)
https://c9.io/schwigri/strange-crash/workspace/index.html
The div #logo has the style:
#logo {
-webkit-transition: .4s;
-moz-transition: .4s;
-o-transition: .4s;
transition: .4s;
}
This causes an immediate crash in Safari 6.0.5 on OS X 10.8.5.
If I remove these transitions it doesn't crash.
How can I resolve this issue?
Safari has some trouble sometimes with all-property transitions.
Try this:
#logo {
-webkit-transition: color .4s;
-moz-transition: .4s;
-o-transition: .4s;
transition: .4s;
}
Edit: After playing around with it some more, it's actually the combination of your usage of -webkit-transition: all and -webkit-calc() that's causing the problem. This is a bug in Safari, and in order to overcome it, you may need to use javascript to calculate your top margin instead of CSS.
Hope this helps!
I have a simple image swap transition that only works on chrome. the code:
<a class="twitter" href="index.php"></a>
.twitter {
width:26px;
height:26px;
display:block;
background:transparent url('../images/twitter.jpg') center top no-repeat;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.twitter:hover {background-image: url('../images/twitter-hover.jpg');}
demo: http://jsfiddle.net/gWKEQ/17/
It's because only Chrome actually supports animating the background-image CSS property - which is actually incorrect according to the spec, where it's noted as:
background-image
Animatable: no
For more info on what you can animate (also in which browsers etc.), check out this page. In the future, other browsers will hopefully allow animating the background-image property (and the spec will change), since this is something programmers/designers actually want.
I'm creating a link button with a background image sprite, that transitions on :hover. It works great in all browsers except for IE, which seems to reset the transition direction.
See a jsFiddle demo here or a video of IE10 here or see the css inline here:
.button {
background:url('http://blackspike.com/temp/icon-github.svg') 0 0 no-repeat; width: 30px; height: 30px; display: block;
-webkit-transition: background-position 0.3s ease;
-moz-transition: background-position 0.3s ease;
-ms-transition: background-position 0.3s ease;
transition: background-position 0.3s ease;
}
.button:hover {background-position: 0 -30px}
Expected behaviour is for it to smoothly transition up then back down. It's like a Fill behaviour is messed up somehow?
Any help greatly appreciated!
It looks like a bug, where the original background-position is not being remembered correctly to transition back to, or some such.
I don't know the exact reason why IE10 is behaving that way, but you can fix it by explicitly setting the background-position to a non-zero value for the vertical offset value. For example:
.button { background-position: 0 1px; }
http://jsfiddle.net/aZqEa/22/
this transition works fine on desktop, but on mobile the "hover" event interpreted as a tap on mobile, just makes the image disappear instead of replacing the new image. All other transitions work.
.mark.studio{
background: url(../images/studio_icon.png) no-repeat;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
height: 50px;
width: 50px;
z-index:103 !important;
}
.mark.studio:hover{
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-transition: all .3s ease-in-out;
background: url(../images/studio_icon-hover.png) no-repeat;
}
I don't own an Android phone, only iOS devices, but I do know that the transition property has very scattered support so far, when it comes to images. Like both Firefox and Internet Explorer support the transition code, but not when it is used to ease-in and out an image. I was answering, with another guy, a similar question with the transition property with background images not working, and we all came to the conclusion that it didn't work in a lot of browsers. Oh, I just looked for it, and the post was by you! css3 transform on image hover in firefox . Well that post basically answers your question. :)
It probably won't fix it (but it's nice to try it anyways), it's pointless to repeat the transition property on hover...