[Webkit-unassigned] [Bug 131486] New: Percentage height on replaced elements is computed wildly incorrectly

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Thu Apr 10 01:50:45 PDT 2014


           Summary: Percentage height on replaced elements is computed
                    wildly incorrectly
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: Macintosh Intel
        OS/Version: Mac OS X 10.9
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: New Bugs
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: marc.hoyois at gmail.com

Created an attachment (id=229032)
 --> (https://bugs.webkit.org/attachment.cgi?id=229032&action=review)
Reduced test case


Percentage height on non-absolutely positioned replaced elements (like <img>, <video>, <object>, etc.) should be computed relative to the height property of the parent element (replaced elements are just like any other element here). However, WebKit computes it with respect to the parent element's height OR its vertical padding, whichever is bigger. That makes no sense... By vertical padding I mean "padding-top + padding-bottom", NOT the padding-box's height.

Steps to reproduce:

Inspect the attached reduced test case:

<div style="background-color:red; height:50px; padding-bottom:100px;">
<img style="background-color:yellow; width:100%; height:100%;" src="">

Here the height of the <img> element should be 50px, but WebKit incorrectly sets it to 100px. You can play around with the numbers and add a padding-top to convince yourself that the height is computed as a percentage of the total vertical padding, provided this is larger than the height.

This bug affects the latest nightly build at the time of this post, and also Safari 7.0.3.


1. This affects height only, not width
2. This only affects replaced elements, not ordinary elements like <div>
3. If the replaced element has position:absolute, then the height is correctly computed as a percentage of the parent's padding-box (in accordance with the spec http://www.w3.org/TR/CSS2/visudet.html)
4. Firefox computes the height correctly in all cases

Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.

More information about the webkit-unassigned mailing list