UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:57.0) Gecko/20100101 Firefox/57.0
Steps to reproduce the problem:
1. With Chrome and a window 360px wide (to emulate a mobile viewport) or with chrome on Android
2. Go to https://m.disneystore.com/disney/store/products/filter?Ntt=disney+animators+collection
3. Click on Products.
4. With Firefox Nightly, do the same steps, side by side
This is a spin-off of https://webcompat.com/issues/5604
What is the expected behavior?
The layout should be the same in both browsers.
What went wrong?
The defined CSS looks like this
.subcategoryContents.container_0 a.subcategoryLink {
padding: 10px 242px 10px 0px;
}
see the big right padding of 242px doesn't give space to the number (floated element) on the right side:
* On Firefox, the floated element is pushed to a new line
* On Chrome, the floated element stays in place and the right side of the box becomes 0px.
You can see this effect clearly when putting a visible outline around the boxes and changing the value for the padding. Some screenshots in
https://webcompat.com/issues/5604#issuecomment-321180454
The behavior in Firefox seems to be legit and is implemented as-is in Edge too.
Daniel Holbert provided a reduced test case
https://jsfiddle.net/doy5okmz/
HTML:
<div class="container">
<span class="padded">
a
<span class="float">Float
CSS:
.container {
width: 300px;
border: 3px solid black;
}
.padded {
padding-right: 260px;
border: 2px dotted lime;
}
.float {
float: right;
width: 50px;
border: 2px dotted red;
}
Did this work before? N/A
Chrome version: <Copy from: 'about:version'> Channel: n/a
OS Version: OS X 10.12
Flash Version:
The CSS specification might need to be clarified.
https://www.w3.org/TR/CSS22/visuren.html#float-position
Comment 1 by foolip@chromium.org
, Aug 10 2017