CSS transition / hover effect not working in Safari
I am currently restyling one of my client sites ( http://citycredits.nl/ ) and I came across the following problem:
When you hover over the products home page, you should get a fadeIn field with the product name / description.
This works great in Chrome, FireFox and InternetExplorer. But when I run it in Safari (Windows) the hang is unresponsive. However, when I "click" on the product, the description box blinks.
Css code:
ul.products a li.product .details {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
transform: translateX(0px);
width: calc(100% - .9em) !important;
background: rgba(53, 82, 100, .5) !important;
top: 33% !important;
bottom: 33% !important;
height: calc(34% - .9em);
text-align: center;
padding: .5em !important;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-o-transition-delay: 1s;
transition-delay: 1s;
-webkit-transition: opacity .4s ease-in-out;
-moz-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
transition: opacity .4s ease-in-out;
}
ul.products a li.product:hover .details {
-moz-opacity: 1 !important;
-khtml-opacity: 1 !important;
filter: alpha(opacity=100) !important;
opacity: 1 !important;
-webkit-transition: opacity .8s ease-in-out;
-moz-transition: opacity .8s ease-in-out;
-o-transition: opacity .8s ease-in-out;
transition: opacity .8s ease-in-out;
}
Product HTML code:
<ul class="products">
<li class="product ...">
<div class="details">
... details content here ...
</div>
</li>
<li> ... more listitems ... </li>
</ul>
source to share
At least part of the problem is that your HTML is invalid and the HTML on your site is not what you posted in your question. You sent:
<ul class="products">
<li class="product ...">
<div class="details">
... details content here ...
</div>
</li>
<li> ... more listitems ... </li>
</ul>
What's really on your site:
<ul class="products">
<a href="http://...">
<li class="...">
<img ...>
<noscript><img.../></noscript>
<div class="details...">
... details content here ...
</div>
</li>
</a>
<a><li> ... more listitems ... </li></a>...
</ul>
The only valid children of a ul
are li
, script
or template
. If you put yours a
inside li
, it will work as expected on the latest Mac Safari.
Regardless of whether the given issue fixes your specific problem, be sure to post an accurate representation of the code that demonstrates your problem. This will save time and help you figure out the answer faster.
source to share