Bug 137922

Summary: border-box with max-width and percent padding results in incorrect positioning after window resize
Product: WebKit Reporter: Jay <jsitter>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: REOPENED    
Severity: Normal CC: bfulgham
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: Mac   
OS: OS X 10.9   
Attachments:
Description Flags
An animated GIF demonstrating the issue none

Jay
Reported 2014-10-21 08:15:35 PDT
1. Set -webkit-box-sizing: border-box on all elements. 2. Create a div inside another div. 3. Give the outer div a max-width in pixels and a horizontal padding in percent. 4. Resize the browser window. The size of the inner div will change. With enough resizing, the inner div can be made to grow outside of the bounds of the outer div. This is most easily seen if you put a border on each div. Here's a Stack Overflow thread about the issue with links to jsfiddles: http://stackoverflow.com/questions/18139760/border-box-padding-max-width-jumping-elements http://jsfiddle.net/Fw4dg/2/embedded/result/
Attachments
An animated GIF demonstrating the issue (2.19 MB, image/gif)
2022-07-14 13:51 PDT, Jay 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Brent Fulgham
Comment 1 2022-07-14 13:22:30 PDT
Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.
Jay
Comment 2 2022-07-14 13:51:24 PDT
Created attachment 460905 [details] An animated GIF demonstrating the issue An animated GIF demonstrating the issue
Jay
Comment 3 2022-07-14 13:52:27 PDT
This is still present in Safari Version 15.5 (17613.2.7.1.8) on Monterey. I've attached a GIF demonstrating the issue.
Note You need to log in before you can comment on or make changes to this bug.