Bug 244844

Summary: Incorrect width for elements with position:absolute, padding-left:50px, width:fit-content, and box-sizing:border-box
Product: WebKit Reporter: Terluin Webdesign <wordpress>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal    
Priority: P2    
Version: Safari 14   
Hardware: Mac (Intel)   
OS: macOS 10.15   

Description Terluin Webdesign 2022-09-06 07:57:16 PDT
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>
Comment 1 Terluin Webdesign 2022-09-06 08:39:06 PDT

*** This bug has been marked as a duplicate of bug 232816 ***