Safari/Chrome中的圆角在悬停时的第一秒不是圆角

Question

我在Safari/Chrome浏览器上遇到了问题。 在这些浏览器上（悬停时），我的圆角变成了正方形，然后又恢复为圆角。这里是代码。

CSS
    div.img-cont {
            float:left; 
            position:relative; 
            margin:10px 20px 0 0px;
            width:180px; 
            height:160px;    
            border:0px solid #FFF;
            overflow:hidden !important;
             -webkit-border-radius:5px; 
                -moz-border-radius:5px; 
                 -ms-border-radius:5px;
                  -o-border-radius:5px; 
                     border-radius:5px;            
    } 
    div.img-zoom { 
            float:left; 
            position:relative; 
            margin:-20px 0 0 -20px; 
            width:220px; 
            height:200px;
            background-position:center center !important;
            -webkit-transition: all 0.25s ease-in-out;
               -moz-transition: all 0.25s ease-in-out;
                -ms-transition: all 0.25s ease-in-out;
                 -o-transition: all 0.25s ease-in-out;
                    transition: all 0.25s ease-in-out;
    } 
    .transition {
            -webkit-transform: scale(0.93,0.93); 
               -moz-transform: scale(0.93,0.93);
                -ms-transform: scale(0.93,0.93);
                 -o-transform: scale(0.93,0.93);
                    transform: scale(0.93,0.93);    
    } 
    .f_border{
             -webkit-border-radius:5px; 
                -moz-border-radius:5px; 
                 -ms-border-radius:5px;
                  -o-border-radius:5px; 
                     border-radius:5px;  
    }

HTML

       <div class="Box_1x1_front" style="height:180px; background:#eaeaea; ">
            <a class="leftAllPlace" rel="thumb" title="" href="http://bonavestis.pl/image/cache/data/Produkty/Sukienki/Sukienka%20JUST%20UNIQUE%20Bandażowa%20W%20Beżu%20+Złoto/Image001-885x885.jpg">
                <div class="img-cont f_border">
                    <div class="img-zoom img_2">
                        <div style="float:left; width:100%; height:100%; background-image:url('http://bonavestis.pl/image/cache/data/Produkty/Sukienki/Sukienka%20JUST%20UNIQUE%20Bandażowa%20W%20Beżu%20+Złoto/Image001-372x372.jpg');"></div>
                    </div>
                </div>
            </a>
        </div>

这里是JavaScript代码

    <script>
    $(document).ready(function(){
        $('.img_2').hover(function() {
            $(this).addClass('transition');
        }, function() {
            $(this).removeClass('transition');
        });
    });
    </script>

这就像是在一个带有圆角的div容器内部放置一张背景图片，但发现这个div容器缩小了。你有什么想法如何解决呢...

[1]: http://jsfiddle.net/Lqfmdah5/6/

- Tadeusz Majkowski

---

这是一个更少代码的相同示例，但在Chrome / Safari中仍存在角落问题。https://jsfiddle.net/wLrkk6bm/ - Tadeusz Majkowski

Answer 1

1) 正如@Squideyes所提到的，有一种仅使用CSS的方法来添加过渡效果。

只需添加CSS选择器：

.img_2:hover {

}

使用.transition的代替方法：

2)

在你的情况中，我建议使用<img>代替<div>的背景图像，因为在我的观点中，图像是内容部分元素，应该使用<img>。

更多信息：IMG vs background-image

3)

关于Chrome中的scale问题。似乎在Webkit中，transition和border-radious存在故障。作为解决方法，请尝试更改width和height。

请查看https://jsfiddle.net/Lqfmdah5/7/

- phts

Answer 2

JavaScript应用的过渡会取消CSS的border-radius。以下方法更加简洁，意味着您不需要使用JavaScript： HTML

<div class="rounded-box">
</div>

CSS

.rounded-box {
    display: block;
    width: 100px;
    height: 100px;
    background: url(http://bit.ly/1MjBCE6) no-repeat center;
    background-size: 100px 100px;
    transition: background-size 0.2s ease-in;
    border-radius: 5px;
}
.rounded-box:hover {
   background-size: 200px 200px;
}

- Sam

---

Tadeusz Majkowski似乎希望图像在某个带有边框半径的包装器内缩放。但是在您的示例中，图像具有边框半径。 - phts

好的，我已经更新了我的答案和 JSFiddle：https://jsfiddle.net/55jpa56h/2。 - Sam

这里有更少的代码，但在Chrome/Safari的角落仍然存在问题。https://jsfiddle.net/wLrkk6bm/ - Tadeusz Majkowski

我的更新版本只缩放背景图像并保持边框半径：http://jsfiddle.net/55jpa56h/2。 - Sam

太棒了，就像我想要的一样 :) - Tadeusz Majkowski

太棒了 :) 你只需要调整背景位置。您可能还希望考虑使用现代化触摸设备禁用此功能：http://www.hongkiat.com/blog/detect-touch-device-modernizr。 - Sam