CODEWITHSUNDEEP
jqueryhtmlcssanimation
Prithviraj Mitra
Prithviraj Mitra

Reputation: 11822

on hover image is shaking in FF Chrome but not in IE10

I am expanding both sides of an image on hover.It works perfect in IE 10 but not in FF and Chrome.The image shakes while expanding. Not sure if it is css or browser issue.Here is the code which I am using

HTML -

<div class="welcome-message-1">
    <div class="expanding-block expanding-block-a content-left desktop-left">
        <div class="expanding-block-inner">
            <img class="expanding-block-background" src="http://demo-pinksquid.co.uk/fiddletest/1319512_orig.jpg" />
            <img class="expanding-block-background-contracted" src="http://demo-pinksquid.co.uk/fiddletest/1319512_orig.jpg" />
        </div>
    </div>
</div>

<p>dsadsadasd</p>
<p>dsadsadasd</p>
<p>dsadsadasd</p>
<p>dsadsadasd</p>
<p>dsadsadasd</p>
<p>dsadsadasd</p>
<p>dsadsadasd</p>
<p>dsadsadasd</p>
<p>dsadsadasd</p>
<p>dsadsadasd</p>
<p>dsadsadasd</p>
<p>dsadsadasd</p>

CSS

.expanding-block-a {
    height: 245px;
    margin: 0 auto 2px;
    max-width: 1030px;
    overflow: hidden;
    position: relative;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    width: 100%;
}
.expanding-block-a .expanding-block-inner {
    height: 245px;
    left: 50%;
    margin-left: -550px;
    margin-top: -110px;
    position: relative;
    top: 50%;
    width: 1100px;
}
.expanding-block-a .expanding-block-background-contracted {
    display: block;
    width: 1100px;
}
p {
    height:50px;
}
.expanding-block-a.hover, .no-js .expanding-block-a:hover {
    max-width: 1100px;
    height: 245px;
}
.expanding-block-a .expanding-block-background {
    display: none;
    height: auto;
    width: 1100px;
}
.expanding-block-a.hover .expanding-block-background, .no-js .expanding-block-a:hover .expanding-block-background {
    display: block;
}

jquery

jQuery(document).ready(function ($) {
    $('.expanding-block-a').hover(

    function () {
        $('.expanding-block').addClass("hover");
    },

    function () {
        $('.expanding-block').removeClass("hover");
    });
});

The interesting part is if there is no browser scrollbar then it works perfect in all browser.Once you get the scrollbar it starts shaking.For debug purpose I have added few paragraphs to see.

Jsfiddle : http://jsfiddle.net/fAm6V/1/

Please reduce the html/javascript window bar in jsfiddle so you get the full image view.

Upvotes: 2

Views: 1024

Answers (1)

97ldave
97ldave

Reputation: 5249

Remove the 2px you have on the following CSS:

.expanding-block-a {
    height: 245px;
    margin: 0 auto 2px;  /*<-- remove 2px from here */
    max-width: 1030px;
    overflow: hidden;
    position: relative;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    width: 100%;
}

This will make the transition work smoothly. Fiddle example

Upvotes: 2

Related Questions