Re: Image % sizing interoperability

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.

Rob
-- 
Jtehsauts  tshaei dS,o n" Wohfy  Mdaon  yhoaus  eanuttehrotraiitny  eovni
le atrhtohu gthot sf oirng iyvoeu rs ihnesa.r"t sS?o  Whhei csha iids  teoa
stiheer :p atroa lsyazye,d  'mYaonu,r  "sGients  uapr,e  tfaokreg iyvoeunr,
'm aotr  atnod  sgaoy ,h o'mGee.t"  uTph eann dt hwea lmka'n?  gBoutt  uIp
waanndt  wyeonut  thoo mken.o w

Received on Tuesday, 10 June 2014 01:52:11 UTC