1667725 - absolute position in line-wrapped inline element is relative to first line, while in other browsers it's relative to last line

Status: RESOLVED DUPLICATE of bug 489100

(Core :: Layout: Positioned, defect)

Description

[Karl Dubost💡 :karlcow]

This has been found in https://webcompat.com/issues/58613

Here a test case.
https://codepen.io/webcompat/pen/VwaNmyq

<style>
.hero {outline: 2px dashed pink;}
.hero * {outline: 2px dashed green;}

.hero {
    width: 200px;
}

.wrap {
  position: relative;
}

.wrap::after {
  position: absolute;
  height: 5px;
  content: "";
  left: 0px;
  right: 0px;
  background-color: red;
  bottom: -20px;
}
</style>

   <section class="hero">
     <div class="hero-meta">
       <h1 class="hero__title">
         <span class="wrap">text wrapped on two lines or more</span>
       </h1>
     </div>
   </section>

The rendering in Firefox is different from the rendering in Chrome/Safari

This could be a duplicate of a known issue.

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Here's a reduced testcase.

The question here is "where is the 0,0 position for positioned descendants of an inline-level multi-line position:relative element"?

It looks like Firefox places it at the top left of the first line. Chrome places it at the top left of the line that the abspos child is a part of, or something like that.

Firefox's behavior seems saner, I think...

Comment 2

[Daniel Holbert [:dholbert]]

Firefox renders testcase 1 with "AA" on the first line (covering up the first bit of the "11111").

Chrome renders it with "AA" on the last line (covering up the first bit of the "44444")

Comment 3

[Daniel Holbert [:dholbert]]

Edge 18 (pre-Chromium) and Safari 13.1 both agree with Chrome's rendering of testcase 1, though, so it seems we're the odd one out.

Comment 4

[Daniel Holbert [:dholbert]]

It looks like this is a dupe of an existing old bug, bug 489100.