Bug 300661 – -webkit-fill-available renders differently on Chrome and WebKit Chrome is correct.

• Component: New Bugs
• Status: RESOLVED DUPLICATE

Created attachment 477064 [details]
Two images showing the results of the above code in Chrome vs WebKit

When using `height: -webkit-fill-available` on WebKit versus Chrome (`height: -webkit-fill-available`or `height: stretch`), the resulting height is different. 

Where as Chrome respects the padding of the parent div and the div's own margins, WebKit does not. WebKit does respect these values when set on width, however. 

<div style="box-sizing: border-box; left: 0px; top: 0px; width: 100px; height: 100px; background-color: blue; padding: 10px;">
<div style="box-sizing: border-box; width: -webkit-fill-available; height: -webkit-fill-available; background-color: red; margin: 10px; align-content: center;">YES</div>
</div>

[Karl Dubost]

Created attachment 477065 [details]
rendering in safari, firefox, chrome

There is a compat spec issue about https://github.com/whatwg/compat/issues/213

It is mentioned that 

> Chrome successfully shipped -webkit-fill-available as just an alias for stretch:  
> https://chromium-review.googlesource.com/c/chromium/src/+/6715777

[Karl Dubost]

Thanks for the report.
https://codepen.io/webcompat/pen/jEWGNVz


Duplicate of Bug 292076

*** This bug has been marked as a duplicate of bug 292076 ***

[Tim Nguyen (:ntim)]

*** This bug has been marked as a duplicate of bug 277117 ***