CODEWITHSUNDEEP
jquerygoogle-chrome
newbie
newbie

Reputation: 14950

Jquery Slide animation UI - Chrome Bug upon minimizing / maximizing

With regards to my previous question before; Jquery slide animation. In order to have a slider, I used this solution:

HTML

<div class="bigBox">
     <div class="try2">
          <h3 id="test2">CLICK THIS</h3>
          <p>This is a demonstration of jQuery SimpleDialog.</p>
      </div> 
      <div class="try">
          <p id="haha">CLICK THIS</p>
          <p>This is a demonstration of jQuery SimpleDialog.</p>
      </div>          
</div>

​ JS

$('#haha').click(function() {
    $('.try').hide("slide", {
        direction: "left"
    }, 1000);
    $('.try2').show("slide", {
        direction: "right"
    }, 1000);
});​

CSS

div.bigBox {
  background-color:transparent;
  width:100px;
  height:125px;
  position: relative;
}

.try, .try2{
  width:100px;
  height:125px;
  position: absolute;
}

.try {
  background-color:green; 
}

.try2{
  background-color:yellow;
} ​

DEMO

The problem is when you minimize/maximize the page (zoom is not 100%) in google chrome, the slider doesn't slide smoothly anymore. But if i test it in firefox/IE, it works well.

What causes the space between the slider in the google chrome? Is this a google chrome bug? How can I fix it? Thank you.

Upvotes: 1

Views: 932

Answers (1)

vee
vee

Reputation: 1246

Admittedly I'm not sure why it's doing this in chrome, but here is a slightly different approach that works for me when zoomed in a bit.

http://jsfiddle.net/CV7fd/20/

The basic concept is to wrap the two child elements "try" and "try2" in another div (call this "overflowDiv"). We then limit the the size of the "bigBox" div to the 100px and set it's CSS overflow property to "hidden". "overflowDiv" is made as wide as the width of "try" and "try2" together such that they don't wrap (200px - remember to include padding, borders, width and margins into this calculation). "bigBox" then effectively becomes a window into the "overflowDiv"'s content. The animation then simple adjusts the "overflowDiv"'s left position.

The result is that we end up only animating one element instead of two, and thus they are more likely to appear flush next to each other.

Upvotes: 3

Related Questions