[Webkit-unassigned] [Bug 274144] New: container-type: inline-size causes discrepancy between computed and painted layout

Tue May 14 04:30:33 PDT 2024

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

            Bug ID: 274144
           Summary: container-type: inline-size causes discrepancy between
                    computed and painted layout
           Product: WebKit
           Version: Safari 16
          Hardware: All
                OS: All
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Compositing
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: torbjorn at monkeybytes.no
                CC: simon.fraser at apple.com

Created attachment 471397

  --> https://bugs.webkit.org/attachment.cgi?id=471397&action=review

Full minimal reproducible example

When combining overflow-x: hidden on a parent element, and a child with container-type: inline-size has margins, it breaks how a position: fixed; child inside the container-type: inline-size; is painted relative to the parent. This is only visual. In the minimal example, you can see the button is rendered outside the parent, however it is still only clickable inside the parent (Where it was supposed to be painted).

Minimal reproducible example:

<style>
  .container {
    margin-left: 100px;
    margin-top: 100px;
    height: 100%;

    background-color: pink;
    container-type: inline-size;
    width: 500px;
  }
  .main {
    position: fixed;
    top: 0;
    left: 0;
    height: 50%;
    width: 50%;
    background-color: lime;
    opacity: .8;
  }
  .content {
    height: 500px;
    width: 100%;
    overflow-x: hidden;
  }
</style>

<body>
  <div class="content">
    <div class="container">
      Where button should be
      <div class="main">
        <button onclick="alert('Hello world')">Click me</button>
      </div>
    </div>
  </div>
</body>

-- 
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/20240514/34e3c60a/attachment-0001.htm>