border-box with max-width and percent padding results in incorrect positioning after window resize

RESOLVED DUPLICATE of bug 1307853

Status

()

RESOLVED DUPLICATE of bug 1307853
4 years ago
a year ago

People

(Reporter: jsitter, Unassigned)

Tracking

34 Branch
x86
macOS
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

4 years ago
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:34.0) Gecko/20100101 Firefox/34.0
Build ID: 20141014134955

Steps to reproduce:

1. Set -moz-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.


Actual results:

Resize the browser window. The size of the inner div will change. This is most easily seen if you put a border on each div.

This is also present in WebKit, although it manifests itself slightly differently:

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

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/
> Resize the browser window. The size of the inner div will change.

You mean it _should_ change but doesn't?
Flags: needinfo?(jsitter)
(Reporter)

Comment 2

4 years ago
No, it *does* change but shouldn't. I should have clarified that you need to narrow the viewport enough to constrain the outer div, narrower than its max-width.
Flags: needinfo?(jsitter)
(Reporter)

Comment 3

4 years ago
I'm sorry, that was poorly worded; put another way, the padding on the outer div changes when it shouldn't. Of course the size of the inner div will change if the outer div is constrained by the viewport, but it changes more than it should, especially after the viewport is widened again.
Created attachment 8509666 [details]
Testcase

It looks like we initially calculate the percentage padding based on
the preferred width, not taking 'max-width' into account.
In a current nightly, I see the padding decrease smoothly as the viewport gets smaller.  

The behavior looks like it changed in this checkin range: https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=f03e2740d604d339ed553dad62a3fc54c317f8fa&tochange=1391a2889aeb2bdd61ad6ef838e65826e35aabc2

Looks like bug 1307853 landed in that range, and pretty much describes this exact problem...

Dupping forward.
Status: UNCONFIRMED → RESOLVED
Last Resolved: a year ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1307853
You need to log in before you can comment on or make changes to this bug.