img with %-unit inside of inline-block element inside of scaled element does not size properly- whooo

[eveningsky]

I realize this is a bit of an edge case, but it may point to other more important undiscovered issues. It takes a fairly complicated set of circumstances to occur.

Normally an image sized using percentage units will automatically scale if one of it's parents is scaled. If a static or relatively positioned img and an absolutely positioned image are both nested inside an inline-block element which is inside the element to be scaled, the static or relative image will either not scale along with or will scale only partially. I first noticed this with $.animate(), but since $.css() suffers the same, I would consider this a core issue.

The example is also complicated so I have commented frivolously.

<script type="text/javascript">
$(document).ready(function(){
	// two of the same image overlayed with >50% opacity should look like one 100% opacity image
	// lowered opacity make the bug easily viewed as the two images split apart.
	$('img').css('opacity',.6);  
	
	// scale the ultimate parent up on mouseover and down on mouseout
	$('div.hoverAction').hover(
		function(){	$(this).css({width:'400px'}); },
		function(){	$(this).css({width:'200px'}); }
	)
});
</script>

<style type="text/css">
/* zero the padding to be sure this isn't the problem */
div, img {margin:0; padding:0;}

div.hoverAction{
	/* if this is display: static the absolutely positioned img fills 100% of screen */
	position: relative;
	/* default width */
	width: 200px; 
}

/* The Culprit. Take this line out and the problem goes away. */
div.inlineBlock{display: inline-block;}

/* 100% width, should scale to 100% of containing element */
img{width: 100%;}

/* Occurs with one static or relative and one absolute.  Both static or both absolute cause no issues. */
img.scalesPartially{position:static;}
img.scalesProperly{position:absolute; top:0; left:0;}

</style>

<div class="hoverAction">
	<div class="inlineBlock">
    	<!-- This image will either not scale or will scale to about 300px instead of 400px 
          -- I have not figured out what decides which.  In one case it scaled partially
          -- then using the exact same code with a different image, it did not scale at all.-->
        <img alt="" class="scalesPartially" src="assets/images/ron.png" />
        <!-- This image will scale properly to completely fill its 400px wide container -->
        <img alt="" class="scalesProperly" src="assets/images/ron.png" />
    </div>
</div>

<!-- On mouseout both images will return to the same proper initial size. -->

[snover]

Thanks for the report, but this is not a jQuery bug. jQuery doesn’t do anything except change the style properties of the object, so any issues you are having are with the browser or the CSS spec.