Question

我使用scale属性在背景中缩放图像，除了在Safari浏览器上之外，其他所有功能均正常工作。

HTML：

<a class="image-box" href="https://dmaindomain/sites/wp-staging/05/nature/">
  <div class="background" style="background: url(https://dmaindomain/sites/wp-staging/05/wp-content/uploads/2019/05/nature-min.png)"></div>
    <div class="image-block-content">
      <h3 class="block-title cl-black">Nature</h3>
                    <span class="block-excerpt cl-transparent">Our Inspiration &amp; Ethos</span>
         <img class="hidden" src="https://dmaindomain.co.za/sites/wp-staging/05/wp-content/themes/bestwood/images/hoverArrow.png">
   </div>
</a>

CSS：

.image-box:focus .background,
.image-box:active .background,
.image-box:hover .background {

    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);


    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;
    /*transition-delay: .3s;*/
}

#image-box-main .image-box {
    width: 49.5%;
    overflow: hidden;
    position: relative;
    height: 400px;
    margin-bottom: 15px;
    display: inline-block;
}

在同一个盒子上，我也使用了转场，但不起作用：

.image-box:hover .block-excerpt {
    visibility: visible;
    color: white;
    transition: all 2s;
    -webkit-transition: all 2s;
    -o-transition: all 2s;
}

当我将鼠标悬停在图像框上时，背景类别会放大的div。但是，当我在Safari浏览器上检查站点并悬停时，缩放不起作用。但是请注意，如果在该框上单击鼠标右键，则该刻度将起作用。

我可能会丢失任何东西吗？

CSS转换和过渡属性在Safari上不起作用

0 个答案: