Css transition property with hover effect not working in Safari

Store Design
, , ,
1

I am working on with the vogue theme, where I want the images to change based on hovering. I have gotten the images to change on all browsers except Safari. Here is my product-list-item.liquid:

<a href="{{ item.url | within: collection | default: '#' }}" class="reveal">
    <figure
        class="
          product-list-item-thumbnail
          {% unless item.featured_media %}
            product-list-item-thumbnail-placeholder
          {% endunless %}
        "
        {{ background_style }}
      >
      {% if item.featured_media %}
        {%
          include 'rimg',
          img: item.featured_media.preview_image,
          size: image_size,
          crop: crop_image,
          lazy: true
        %}
      {% else %}
          <img
            src="{{ placeholder_uri }}"
            alt="{{ title | default: product.title | escape }}"
          >
      {% endif %}
    </figure>
    <figure class="product-list-item-thumbnail-hover" {{ background_style }}>
      {%
          include 'rimg',
          img: second_image,
          size: image_size,
          crop: crop_image,
          lazy: true
      %}
    </figure> 
  </a>

And here is my theme.scss.liquid:

.reveal {
  position: relative;
}
.reveal .product-list-item-thumbnail-hover {  /* CSS before hovering*/
  position: absolute; 
  z-index: 1;
  top: 0;
  bottom: 0;
  width: 100%; 
  height: 100%;  
  background-position: 50% 50%;
  background-size: contain;
  opacity: 0; 
  margin: 0 0 30px 0px;
  -webkit-transition: -webkit-transform opacity all 0.3s ease-in-out; /*# safari transition
  /*-moz-transition: -moz-transform opacity all 0.3s ease-in-out; /*#  Mozilla transition */
  /*-o-transition: -o-transform opacity all 0.3s ease-in-out; /* # Opera transition */
  transition: opacity 0.3s ease-in-out; /* # All browsers transition */
}
/* Check if the browser supports the standard transition property */
@supports (transition: opacity 0.3s ease-in-out) {
  .reveal .product-list-item-thumbnail-hover {
    transition: opacity 0.3s ease-in-out;
  }
}

.reveal:hover .product-list-item-thumbnail-hover { /* CSS after hovering*/
  opacity: 1;
  z-index: 1;
  object-fit: cover;
  margin: 0 0 30px 0px;
}

What am i missing to make the hovering changes appear in Safari?

2

Hi @AndreasLiquid

This is David at SalesHunterThemes.
In this case you can try to use this code:

.reveal {
  position: relative;
}
.reveal .product-list-item-thumbnail-hover {  /* CSS before hovering*/
  position: absolute; 
  z-index: 1;
  top: 0;
  bottom: 0;
  width: 100%; 
  height: 100%;  
  background-position: 50% 50%;
  background-size: contain;
  opacity: 0; 
  margin: 0 0 30px 0px;
  -webkit-transition: -webkit-transform opacity all 0.3s ease-in-out; 
  /*# safari transition*/
  -moz-transition: -moz-transform opacity all 0.3s ease-in-out; 
  /*#  Mozilla transition */
  -o-transition: -o-transform opacity all 0.3s ease-in-out; 
  /* # Opera transition */
  transition: opacity 0.3s ease-in-out; 
  /* # All browsers transition */
}
/* Check if the browser supports the standard transition property */

  .reveal .product-list-item-thumbnail-hover {
    transition: opacity 0.3s ease-in-out;
  }

.reveal:hover .product-list-item-thumbnail-hover { /* CSS after hovering*/
  opacity: 1;
  z-index: 1;
  object-fit: cover;
  margin: 0 0 30px 0px;
}
1 Like
3

Thanks for the reply, but it didn’t do any difference unfortunately :disappointed_face:

4

Hi @AndreasLiquid
Can you share your store url? Then we will check and help you