Absolutely positioned inline elements placed differently in Chrome 76+

Question

Problem

Since Chrome 76 absolutely positioned inline elements with no bottom, left, right or top properties are being placed differently.

Example

View the snippet below in Firefox (69) and Chrome (76+). Chrome will display the button and span on a new line, while Firefox will display them next to the label.

div {
  margin: 2em auto;
  position: relative;
}

input {
  width: 100%;
}

button,
span {
  position: absolute;
}

<div>
  <label for="text_field1">Example with button</label>
  <button>BUTTON</button>
  <input type="text" id="text_field1" value="Example value">
</div>

<div>
  <label for="text_field2">Example with span</label>
  <span>SPAN</span>
  <input type="text" id="text_field2" value="Example value">
</div>

Expected behaviour

The button/span should be placed next to the label, not below it. It appears that Chrome is changing the display mode from inline-block/inline to block (see https://www.w3.org/TR/css-position-3/#dis-pos-flo) before it calculates where to place the element whereas Firefox and older versions of Chrome do this the other way around.

Chrome 76 (Unexpected behaviour)

Chrome 75 (Expected behaviour)

Firefox 69 (Expected behaviour)

Edge 16 (Expected behaviour)

Safari 12 (Expected behaviour)

Browsers effected

Any Chromium based browser since version 76.

Is this a bug or an intentional change to how Chromium will position elements under these conditions?

How can we position the element in a consistent manner across browsers?

*How can we position the element in a consistent manner across browsers?* by setting top/left/right/bottom or you will fall into the static position and each browser has some freedom to calculate it — Temani Afif, Sep 06 '19 at 12:19
possible duplicate : https://stackoverflow.com/a/56443502/8620333 ... note the part : *But rather than actually calculating the dimensions of that hypothetical box, user agents are free to make a guess at its probable position.* — Temani Afif, Sep 06 '19 at 12:23
Thanks for taking a look @TemaniAfif. Setting a `bottom`,`left`,`right` or `top` property is not an option in our use case as we want the element to display after the label text and we don't know how long that label will be. I agree it's by design, but it seems that the browsers are calculating things in different orders. Both make sense, but we would like a way to get a consistent output if possible without a complete refactor. — Hidden Hobbes, Sep 06 '19 at 12:37
*we want the element to display after the label text* simply remove `position:absolute`, it's by default like that. Why the need of position? — Temani Afif, Sep 06 '19 at 12:41
@TemaniAfif Good question! It's to be able to increase the click area of the element without it shifting the elements around it. We can achieve this in a different way, but would like to know why a change was made to Chromium which breaks this previously working code. — Hidden Hobbes, Sep 06 '19 at 14:27

score 1 · Accepted Answer · answered Sep 11 '19 at 16:00