Bug 272479 – REGRESSION (271848@main): Incorrect position of ::before { position:absolute; bottom:0} dynamically changing content

• Component: CSS
• Status: RESOLVED FIXED

[Aleksandar Totic]

Created attachment 470854 [details]
Demo of the bug

Dynamically changing CSS content: of an absolutely positioned pseudo-element
(::after/::before) with bottom:0 moves content to the top of its container.

I believe this is a regression, it worked a few weeks ago, might be the latest update.

This is a problem with style invalidation.
Works in FF/Chrome.

See attached file for demo, detailed report.

Basically, this css will display incorrectly if you toggle .changeContent class.

  .container {
    display: block;
    position: relative;
  }

  .container::after {
    position: absolute;
    bottom: 0;
    display: block;
    content: 'default ::after content';
  }
  .container.changeContent::after {
    content: ".container.changeContent::after content ";
  }

[Alexey Proskuryakov]

Thank you for the reduced test case with clear steps!

I can reproduce in Safari 17.5 beta, and can not reproduce in Safari 17.1, so it's indeed a regression.

[Radar WebKit Bug Importer]

<rdar://problem/126234450>

[Antti Koivisto]

Excellent test case!

[Antti Koivisto]

Pull request: https://github.com/WebKit/WebKit/pull/27324

[Aleksandar Totic]

I was hoping that an excellent test case would lead to a quick fix. And it did, thanks!

[Aleksandar Totic]

Checked out the pull request. This test would also be a good addition to
wpt/css/CSS2/positioning/, dynamic test coverage is scarce.

[EWS]

Committed 277550@main (6d4b28213caf): <https://commits.webkit.org/277550@main>

Reviewed commits have been landed. Closing PR #27324 and removing active labels.

[Antti Koivisto]

Good point, I'll make a WPT version of the test.