Rounded corners in safari/chrome are not rounded on hover for first second

Question

I have a problem with Safari/Chrome. On these browsers ( on hover ) my rounded corners make a square and then go back to be rounded.Here is the code

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 HERE

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

Its like zoom out div with background-image inside div with rounded corners Any ideas how to fix this...

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

Here is the same example with less code, but there is still a problem with corners in chrome/safari https://jsfiddle.net/wLrkk6bm/ — Tadeusz Majkowski, Mar 29 '15 at 15:26

score 2 · Answer 1 · edited May 23 '17 at 12:23

1)

As @Squideyes mentioned there is an only-CSS approach how to add a transition.

Just add CSS selector:

.img_2:hover {

}

instead of .transition

2)

Also I recommend using <img> instead of background-images of <div> in your case because from my point of view image here is a content-part element and assumes using <img>.

More info: IMG vs background-image

3)

And about the scale problem in Chrome. Seems that there is a glitch with transition and border-radious in Webkit. Try to change width and height instead as a workaround.

Check out https://jsfiddle.net/Lqfmdah5/7/

Sam · Answer 2 · 2015-03-29T15:30:58.423

1

The transition that is being applied in JavaScript takes away the CSS border-radius. The following method is a lot cleaner and means you don't need to use 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;
}

edited Mar 29 '15 at 15:30

answered Mar 29 '15 at 14:50

Sam

1,401
3
26
53

Seems Tadeusz Majkowski wants the image to be zoomed inside some wrapper with border radius. But in your example an image has border radius. – phts Mar 29 '15 at 14:58
Good call. I've updated my answer and the JSFiddle: https://jsfiddle.net/55jpa56h/2. – Sam Mar 29 '15 at 15:20
Here is the same with less code but there is still problem with corners in chrome/safari https://jsfiddle.net/wLrkk6bm/ – Tadeusz Majkowski Mar 29 '15 at 15:24
1

My updated version zooms the background image only and maintains the border-radius: http://jsfiddle.net/55jpa56h/2. – Sam Mar 29 '15 at 15:31
Great just like i want it :) – Tadeusz Majkowski Mar 29 '15 at 15:45
Awesome :) You'll just need to adjust the background-position. You may also want to consider disabling this for touch devices by using modernizr touch: http://www.hongkiat.com/blog/detect-touch-device-modernizr. – Sam Mar 29 '15 at 15:48

Rounded corners in safari/chrome are not rounded on hover for first second

2 Answers2

Linked