Bug 137922 - border-box with max-width and percent padding results in incorrect positioning after window resize
Summary: border-box with max-width and percent padding results in incorrect positionin...
Status: REOPENED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac OS X 10.9
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2014-10-21 08:15 PDT by Jay
Modified: 2022-07-14 13:52 PDT (History)
1 user (show)

See Also:

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 an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Jay 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/
Comment 1 Brent Fulgham 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.
Comment 2 Jay 2022-07-14 13:51:24 PDT 
Created attachment 460905 [details]
An animated GIF demonstrating the issue

An animated GIF demonstrating the issue
Comment 3 Jay 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.