Jquery Toggle changing Width/Height in Chrome

Question

This code has always worked in Chrome, until now v32.0.1700.76 m. Now, when I toggle the display property to inline (intending to make the element visible), it is setting both width and height of the element to -10px. It works as intended in Firefox and always has in Chrome...until now. I even tried hard-coding width and height into the .on class, but that is being overridden somehow.

<style>
.on {display: inline; width: 35px; height: 35px}
.off {display: none}
</style>

<div style="width:300px" class="featImage">
<img width="300" height="250" src="http://thumbs.fliqz.com/622f3b4c6abd4845a17ca177bc27cc95.jpg">

<div id="fav" style="width: 35px; height: 35px; padding: 10px 10px 0 0; background: red; margin: -257px 0 0 250px; float: right; position: relative; z-index: 10;"></div>
</div>

<script>

$(document).ready(function(){

 $(".featImage").hover(
  function () {
    $('#fav').removeClass('off').addClass('on');
  },
  function () {
    $('#fav').removeClass('on').addClass('off');
  }
 );

});

</script>

http://jsfiddle.net/tXmsE/3/ if you set position of red square to absolute, it will work... i'm not sure what caused problems... — sinisake, Jan 18 '14 at 01:00

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

http://jsfiddle.net/tXmsE/4/

Float image left, and it will work.

<img style="float:left;" width="300" height="250" src="http://thumbs.fliqz.com/622f3b4c6abd4845a17ca177bc27cc95.jpg">

Also, this could be problem, too:

display:inline resets height and width

Also, you can remove float(s):

http://jsfiddle.net/tXmsE/6/

(because you already positioned element with margin and padding...)

However, for my taste - this is cleanest solution: http://jsfiddle.net/tXmsE/3/ (position:absolute)

Jquery Toggle changing Width/Height in Chrome

1 Answers1