Bug 298680 – CSS Anchor Positioning prevents display transition when used with transition-behavior: allow-discrete

• Status: RESOLVED
• Resolution: FIXED
• Component: CSS

[Zacky Ma]

When a [popover] element that's anchor positioned, e.g. to the toggle button, and it has `transition-behavior: allow-discrete`, e.g. we want to animate its opacity changes. The initial state of the popover renders correctly, and it can correctly transition to `:popover-open` with `display` set to a non-`none` value. But when it's closed, the `display` property remains instead of setting back to `none`.

This only happens when Anchor Positioning is used.

Reproduce: https://codepen.io/marchbox/pen/pvvKEGO

[Zacky Ma]

Also tried to explicitly setting `display: none` for `:not(:popover-open)` instead of relying on the UA style, the bug persisted.

[Radar WebKit Bug Importer]

<rdar://problem/160421419>

[Ehren]

I was about to submit the same bug. Another Codepen is here: https://codepen.io/eharber/pen/yyeLgNz?editors=1100

Something else to note, is that the visibility and content-visibility properties (and potentially others) don't change either. So attempting to use this as a temporary solution doesn't work:

[popover]:not(:popover-open){
	display: none;
	visibility: hidden;
	content-visibility: hidden;
}

Closing the popover via .hidePopover() also fails.


If you need a hacky fix until this bug is solved, this seems help:
[popover]:not(:popover-open){
	opacity: 0;
	pointer-events: none;
}

[Tim Nguyen (:ntim)]

Created attachment 476837 [details]
Testcase reduction

Here's a test reduction

[Antti Koivisto]

Further reduced

<div>FAIL if this is visible</div>

<style>
div {
  position-area: end;
  position: absolute;
  border: 1px solid;
  transition-behavior: allow-discrete;
  transition-duration: 1s;
}
</style>
<script>
    document.body.offsetLeft;
    document.querySelector("div").style.display = "none";
</script>

[Antti Koivisto]

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

[EWS]

Committed 300519@main (a6a5ef3d9b99): <https://commits.webkit.org/300519@main>

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

[Antti Koivisto]

https://github.com/web-platform-tests/wpt/pull/55064

[EWS]

Committed 297297.482@safari-7622-branch (5316cefdba80): <https://commits.webkit.org/297297.482@safari-7622-branch>

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