[Webkit-unassigned] [Bug 213049] New: Overzealous overflow detection with column-count

Wed Jun 10 14:32:43 PDT 2020

https://bugs.webkit.org/show_bug.cgi?id=213049

            Bug ID: 213049
           Summary: Overzealous overflow detection with column-count
           Product: WebKit
           Version: Safari 13
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: friedj at google.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

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>
```

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20200610/f11d1c50/attachment.htm>