Bug 213049
| Summary: | Overzealous overflow detection with column-count | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Jake Fried <friedj> |
| Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW | ||
| Severity: | Normal | CC: | azin+webkit, bfulgham, simon.fraser, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari 13 | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
Jake Fried
Summary
---------------
Original context: https://github.com/ampproject/amphtml/issues/28556
This appears to be a regression with Safari version 13.1, since I could not reproduce this on version 13.0.5.
When using a combination of column-count, responsive images, padding, and overflow:hidden, images become fully hidden that shouldn't be.
Reproducible case: https://eight-lucky-diamond.glitch.me/)
```html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
column-count: 2;
}
.img-wrapper {
position: relative;
padding: 5px;
}
.responsive-wrapper {
overflow: hidden !important;
position: relative;
}
.sizer {
padding-top: 66.66666666666666%;
}
img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
max-height: 100%;
max-width: 100%;
}
</style>
</head>
<body>
<h1>column-count test</h1>
<div class="container">
<div class="img-wrapper">
<div class="responsive-wrapper">
<div class="sizer"></div>
<img
src="https://upload.wikimedia.org/wikipedia/commons/8/88/VNU_lethanhtong_900x600.jpg"
width="900"
height="600"
/>
</div>
</div>
<div class="img-wrapper">
<div class="responsive-wrapper">
<div class="sizer"></div>
<img
src="https://upload.wikimedia.org/wikipedia/commons/8/88/VNU_lethanhtong_900x600.jpg"
width="900"
height="600"
/>
</div>
</div>
</div>
</body>
</html>
```
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/64278994>