Bug 23570
Summary: | Percentage for 'top'/'bottom' on relatively positioned elements | ||
---|---|---|---|
Product: | WebKit | Reporter: | Simon Pieters (:zcorpan) <zcorpan> |
Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
Status: | RESOLVED CONFIGURATION CHANGED | ||
Severity: | Normal | CC: | ahmad.saleem792, ap, bfulgham, hyatt, rniwa, simon.fraser |
Priority: | P2 | ||
Version: | 528+ (Nightly build) | ||
Hardware: | PC | ||
OS: | OS X 10.5 |
Simon Pieters (:zcorpan)
[[
Yes, it ignores percentage values for top and bottom (with relative positioning) when the parent is a percentage height (or height auto).
It even fails if there is an ancestor with a fixed pixel height but the next child is set at height:100% then it still fails even though the percentage height should resolve to a known dimension.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.test {
height:200px;
background:red;
top:300px;
position:relative
}
p {
position:relative;
top:-50%;
border:1px solid green;
}
.test div {
height:100%;
background:blue;
}
</style>
</head>
<body>
<div class="test">
<div>
<p>test</p>
</div>
</div>
</body>
If you remove the nested div it will suddenly work.
(This is Safari3 on the PC but I assume mac versions would be the same.)
]] -- Paul O'B on sitepoint forums
Attachments | ||
---|---|---|
Add attachment proposed patch, testcase, etc. |
Ahmad Saleem
I changed the test case from Description / Comment 0 and changed it into following JSFiddle:
Link - https://jsfiddle.net/zgv6mnch/1/show
In the above, Safari 15.6 on macOS 12.5 matches with other browsers (Chrome Canary 105 and Firefox Nightly 104). Since all browsers are rendering the page same, I am not sure whether there is something else to be done (except if I understood this bug wrong - then please ignore me). I think this can be closed as "RESOLVED CONFIGURATION CHANGED". Thanks!