CODEWITHSUNDEEP
htmlcsscss-positionchromiumdisplay
Hidden Hobbes
Hidden Hobbes

Reputation: 14173

Absolutely positioned inline elements placed differently in Chrome 76+

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 76

Chrome 75 (Expected behaviour)

Chrome 75

Firefox 69 (Expected behaviour)

Firefox 69

Edge 16 (Expected behaviour)

Edge 16

Safari 12 (Expected behaviour)

Safari 12

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?

Upvotes: 2

Views: 809

Answers (1)

Hidden Hobbes
Hidden Hobbes

Reputation: 14173

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

Yes it is a bug.

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

The bug has been fixed in Chrome version 79.0.3908.2 so no action is necessary.

The bug report can be seen here: https://bugs.chromium.org/p/chromium/issues/detail?id=1001438#c19.

Upvotes: 1

Related Questions