Re: Image % sizing interoperability

On Mon, Jun 9, 2014 at 6:51 PM, Robert O'Callahan <robert@ocallahan.org> wrote:
> On Tue, Jun 10, 2014 at 11:59 AM, Bogdan Brinza <bbrinza@microsoft.com>
> wrote:
>>
>> Another class of issues we’ve encountered while investigating bugs is
>> image sizing.
>>
>>
>>
>> Consider the following two examples:
>> http://jsfiddle.net/boggydigital/6D5Nc/
>>
>>
>>
>> 1)      Image has max-height: 100% and 50px on one of the grandparents. IE
>> and Firefox resolve size using image intrinsic size, Chrome uses 50px.
>>
>> 2)      Is similar to 1, but uses height: 100% and 50px on one of the
>> grandparents. Again, IE and Firefox do same thing and Chrome uses 50px for
>> height.
>>
>>
>>
>> In our investigations this was root cause for many interoperability issues
>> on mobile sites such as Amazon.com, HM.com, SI.com and few others.
>>
>>
>>
>> As with earlier textarea overflow question – we’d like to clarify the
>> expected behavior here and ultimately achieve better interoperability.
>
>
> As far as I can tell this is just a strange Blink bug. Slightly altered
> testcase:
> <!DOCTYPE HTML>
> <div style="height:600px;">
>   <div>
>     <div style="height:100%; border:2px solid black;">
>       <img style="height:100%"
> src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAHklEQVQ4jWP4z8Dwn5qYYdTAUQNHDRw1cNTAkWogAPbLHQ5b76wSAAAAAElFTkSuQmCC">
>       <div style="height:100px; background:cyan"></div>
>     </div>
>   </div>
> </div>
>
> It's clear the black-border <div> is being laid out with height:auto (per
> spec), but somehow the <img> is seeing the <div>'s containing block height
> as if we were in quirks mode and the height:100% was honored.

Has this been reported yet? If not, I'll file a bug on Blink for it.

~TJ

Received on Tuesday, 24 June 2014 21:49:34 UTC