W3C home > Mailing lists > Public > www-style@w3.org > June 2014

Re: Image % sizing interoperability

From: Robert Hogan <robhogan@gmail.com>
Date: Wed, 25 Jun 2014 22:22:22 +0100
Message-ID: <CAD1xn+OT_87XfX3sfH-J=7E1ZLDVxW99tEGPcPJF+2ga2Fv3kQ@mail.gmail.com>
To: robert@ocallahan.org
Cc: Bogdan Brinza <bbrinza@microsoft.com>, "www-style@w3.org" <www-style@w3.org>
The spec says: "The percentage is calculated with respect to the height of
the generated box's containing block. If the height of the containing block
is not specified explicitly (i.e., it depends on content height), and this
element is not absolutely positioned, the value computes to 'auto'. "

In this case if we give an element 'height:100%' you could argue that we
are 'specifying' the height 'explicitly' and it doesn't depend on the
content height. So even though the element's computed value of the height
is auto, we are not allowed to treat any elements with percentage height it
contains as having an auto height.

I don't agree with this way of reading it but I think the use of the words
'specified explicitly' (especially in the context of special-meaning terms
like 'specified value') makes the spec more ambiguous than this thread is
admitting.

Hoping I can be corrected on this point  so my change to Blink can sail
through.



On 10 June 2014 02:51, 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.
>
> 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 Wednesday, 25 June 2014 21:22:50 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:22 UTC