The this CL update brought about a significant change, as noted in issue 885175. This change introduced the align-self: last baseline value according to the draft specifications.
Note: I recently discovered this new value and am still uncertain about its full implications. If any corrections are needed, feel free to provide them.
In Chrome's latest implementation, the default setting for align-self seems to have shifted to first baseline. While it's unclear what the previous behavior was or how other User Agents handle the auto value, it appears that the old behavior resembled last baseline, different from Chrome's current approach with first baseline.
To maintain consistency across browsers and ensure similar behavior in Chrome versions >= 108, it's recommended to explicitly set the align-self property of inner flex containers (like <mark> elements) to last baseline.
Referencing the following example demonstrates the fix:
.parent-flex {
display: inline-flex;
align-items: flex-end;
}
.column {
display: flex;
flex-direction: column-reverse;
}
/*
For demonstration purposes, the fix is only applied when the input is checked.
The same would be added to your .column rule or to OP's <mark> elements
*/
:checked ~ * .column {
align-self: last baseline;
}
<label for=inp>Apply the fix</label><input type=checkbox id=inp><br><br>
<span>Inline</span>
<span class="parent-flex">
<span class="column">
<span>row</span>
<span>row</span>
<span>row</span>
</span>
</span>
Below is an extended version of the above fix within OP's original code:
mark { align-self: last baseline }
<div dir="auto" style="line-height: 2.5; text-align: left;">
<span data-start_offset="0" data-end="28" style="white-space: break-spaces;">Lorem ipsum dolor sit amet, </span>
<span>
<span style="display: inline-flex; align-items: flex-end; position: relative;">
<mark id="28_39_96d6a5ea-a48a-447e-9312-cac338d30c4a" data-start_offset="28" data-end="39" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255); position: relative; padding: 0px; cursor: default; display: flex; flex-direction: column-reverse; opacity: 0.9; line-height: 1.5em;">consectetur <div style="position: absolute; background: rgba(255, 255, 255, 0.24); height: 23px; width: 100%; z-index: -1;"></div>
<div style="min-width: 88px; height: 23px; background: rgb(255, 0, 199); position: absolute; z-index: -2;"></div>
<span title="Noun" class="" style="display: flex; min-height: 1.2em;">
<span id="96d6a5ea-a48a-447e-9312-cac338d30c4a" class="renderLabel" style="background: rgb(255, 255, 255); color: rgb(255, 0, 199); max-width: 88px; min-width: 88px; margin-left: 0px; flex: 1 1 0%;">Noun</span>
</span>
</mark>
</span>
... (truncated for brevity)