Bug 251597 – REGRESSION (256782@main): Animating visibility with a display:contents child causes an element to disappear

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

[Rado]

Created attachment 464815 [details]
Test page

An element with transitioned color on hover, inside a display: contents parent, which is displayed by animated visibility: visible. Hover it to hide it only in Safari 16.3. Normal transition observed in older Safari and Chrome.

<style>
	@keyframes menu-opening {
		100% {
			visibility: visible;
		}
	}

	ul {
		animation: menu-opening .3s 1 forwards;
		visibility: hidden;
	}

	li {
		display: contents;
	}

	a {
		transition: color .2s ease-in-out;
	}

	a:hover {
		color: red;
	}
</style>

<ul>
	<li>
		<a href="/">Hover me on Safari 16.3 and I disappear</a>
	</li>
</ul>

https://rado.bg/safari-16.3.html

[Radar WebKit Bug Importer]

<rdar://problem/105102892>

[zalan]

regression range:
https://commits.webkit.org/compare/256789@main...256757@main

[zalan]

(In reply to zalan from comment #2)
> regression range:
> https://commits.webkit.org/compare/256789@main...256757@main
there's a few strong candidates in that range, I'd start with [web-animation].

[Antoine Quint]

This regressed with 256782@main, the fix for bug 247803.

[Antti Koivisto]

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

[Antti Koivisto]

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

[EWS]

Committed 260270@main (53814777b5f2): <https://commits.webkit.org/260270@main>

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

[EWS]

Committed 259548.276@safari-7615-branch (403ebdb08ec1): <https://commits.webkit.org/259548.276@safari-7615-branch>

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