[Webkit-unassigned] [Bug 244844] New: Incorrect width for elements with position:absolute, padding-left:50px, width:fit-content, and box-sizing:border-box

[bugzilla-daemon at webkit.org]

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

            Bug ID: 244844
           Summary: Incorrect width for elements with position:absolute,
                    padding-left:50px, width:fit-content, and
                    box-sizing:border-box
           Product: WebKit
           Version: Safari 14
          Hardware: Mac (Intel)
                OS: macOS 10.15
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: wordpress at terluinwebdesign.nl

The width of an element is incorrect (too narrow) if the following conditions are met:
1. Property 'position' is set to 'absolute' or 'fixed'.
2. Property 'padding-left', 'padding-right', 'border-left-width', or 'border-right-width' are set to anything but '0px', for instance: '50px'.
3. Property 'width' is set to 'fit-content', 'min-content', or 'max-content'.
4. Property 'box-sizing' is set to 'border-box'.

An example to be able to recreate:
<div style="padding-left:50px;width:fit-content;position:absolute;top:0px;left:0px;">
  <div style="padding:50px;background:#000;color:#fff;font-size:25px;">Text</div>
</div>

If you add up the left and right padding and the left and right border width, then that is the amount of width that the element is missing.
So, if I apply 'padding-left: 50px', then the element becomes '50px' too narrow.


The height of an element is incorrect (too tall) if the following conditions are met:
1. Property 'position' is set to 'absolute' or 'fixed'.
2. Property 'padding-top', 'padding-bottom', 'border-top-width', or 'border-bottom-width' are set to anything but '0px', for instance: '10px'.
3. Property 'height' is set to 'fit-content', 'min-content', or 'max-content'.
4. Property 'box-sizing' is set to 'border-box'.

If you apply 'padding-top: 10px' to such an element, then its height would go from '30px' to '50px' (double the amount of top padding).

An example to be able to recreate:
<div style="padding-top:10px;height:fit-content;position:absolute;top:0px;left:0px;width:100px;">
  <div style="background:#000;width:100%;height:30px;"></div>
</div>

-- 
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/20220906/13cebce6/attachment.htm>