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;
}
Related
Right now I try to create the following web page: https://wpjelly.com/shave/
Can someone help me, how I can disable the (blurry) hover effect of the logo in the center?
I still want to keep the hover effect of the menu and dropdown menu, but want to get rid of it of the logo. I already tried to add some CSS, but all didn't work.
Thank you very much in advance!
Kind regards,
Jonas
The logo has opacity: 0.6 set when being hovered.
Set it to 1:
#site-header.center-header #site-navigation-wrap .middle-site-logo:hover img {
-moz-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
set the opacity to 1
and remove the transitions
#site-logo #site-logo-inner a img {
width: auto;
vertical-align: middle;
**webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;**
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.
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'm trying to get tabs (as a menu) to be offset the screen and when somebody hovers over it, it transitions downwards revealing more of the tab. My code is this:
.tab:hover {
position: relative;
top: 45px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
When I hover over the image, it does the transitioning downwards correctly. However, when I leave the tab, it snaps back into place. What I'd like it to do is transition back into its original place, not snap. What am I missing from the code to make this happen?
UPDATE:
I figured out the problem. I made a new CSS style set for just .tab and I put in the transitioning AND top: 0px.
Instead of putting it on the :hover, put the transition on .tab.
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...