Bug 213049

Summary: Overzealous overflow detection with column-count
Product: WebKit Reporter: Jake Fried <friedj>
Component: Layout and RenderingAssignee: 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   

Description Jake Fried 2020-06-10 14:32:43 PDT
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>
```
Comment 1 Radar WebKit Bug Importer 2020-06-11 18:14:29 PDT
<rdar://problem/64278994>