Clients page glitch

[nurupo]

When navigating to the Clients page you can sometimes see all the client screenshots popup before the page finishes loading. Here is a webm showing this.

This issue was emailed to us by an anonymous person together with the webm.

[robinlinden]

The problem is the .modalDialog { transition: opacity 0.2s ease-in; } in style.css. The modals are first set to be shown and then transitioned to being hidden over 0.2s and that's what you can see when you open the page.

[robinlinden]

So, this is a Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=332189
We can move the transition to .modalDialog:target (would stop animations going from visible to hidden) or prevent the bug from affecting us by having the clients page load a script (can be empty) after the affected elements. The script solution is why the bug doesn't affect e.g. the download page even though it also uses modals.