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!
Related
how to block autoprefixer from adding -webkit prefixes to a Mozilla specific extension ?
Here are some examples to make my point :
.custom-range::-moz-range-thumb {
-webkit-transition: none;
transition: none
}
-webkit-transition has nothing to do here as it is a Mozilla specific selector (::-moz-range-thumb).
Another crazy output happens with keyframes and transitions, as Autoprefixer creates useless variants
-webkit-transition: -webkit-box-shadow 0.1s ease-out;
transition: -webkit-box-shadow 0.1s ease-out;
transition: box-shadow 0.1s ease-out;
transition: box-shadow 0.1s ease-out, -webkit-box-shadow 0.1s ease-out;
Instead of just
-webkit-transition: -webkit-box-shadow 0.1s ease-out;
transition: box-shadow 0.1s ease-out;
How to fix this ?
Thanks for your help.
You can force Autoprefixer to ignore specific blocks of CSS by using "Control Comments" (their words). It looks pretty flexible.
.className {
/* autoprefixer: off */
something: not-prefixed;
}
Here's the documentation.
But you might also want to submit a bug as what you're seeing could be filtered out.
got this mysterious error on hover (and click) when i hover over an image in Safari 7.06 (haven't tested other versions). Other browsers doesn't seem to have this problem) This occurs only on the right column, it's a kind of masonry grid but can't find out what is going wrong..
Link: http://www.abouzahra.nl/interior-products/
Someone can figure this out? Would be great!
Hope you guys can help,
Cheers Joeri
Try putting the transition in the default state and only toggle the opacity on hover. Also try having the default with an opacity of 1.0.
.cols img {
opacity: 1.0;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.cols img:hover {
opacity: 0.6;
}
How can i turn all css3 animations off in just Opera browser ?
I don't want to pickup them completly , just want to turn it off in opera.
You'll be looking at targeting just the opera browser, this is done with a prefix:
-o-transition: none;
So targeting a specific element would have the following:
a {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: none;
transition: all 0.5s ease-in-out;
}
But your transition might be different without looking at a fiddle of your html and css.
At least, i used this code:
noindex:-o-prefocus, * {
animation : none !important;
-o-animation : none !important;
}
and problem is fixed.
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.
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...