Side navigation
#4827 closed bug (invalid)
Opened June 28, 2009 12:39AM UTC
Closed November 19, 2010 05:58AM UTC
img with %-unit inside of inline-block element inside of scaled element does not size properly- whooo
Reported by: | eveningsky | Owned by: | |
---|---|---|---|
Priority: | minor | Milestone: | 1.4 |
Component: | core | Version: | 1.3.2 |
Keywords: | inline-block css percent scale size nested | Cc: | |
Blocked by: | Blocking: |
Description
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. -->
Attachments (0)
Change History (1)
Changed November 19, 2010 05:58AM UTC by comment:1
resolution: | → invalid |
---|---|
status: | new → closed |
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.