fix: The handset mode overlay is visible a split second for every call

[BillCarsonFr]

At the start of every all the Handset Mode was visible a split second

The problem is that the Overlay is initialy shown visible (display: flex) and immediatly fade out

.overlay[data-show="false"] {
  animation: fade-out 130ms forwards;
  pointer-events: none;
}
@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    display: none;
  }
}

As a fix I propose to start in display: none, and then let fade-in or fade-out update the visibility.

I have not been able to create a playwright test for that. It appears that playwright waits for stable states, so I couldn't find a way to catch the overlay that is only appearing briefly

[robintown]

CSS animations are tricky - in my testing with this PR I now can't get the earpiece overlay to show up at all. Perhaps a CSS transition would be more appropriate here?

diff --git a/src/room/EarpieceOverlay.module.css b/src/room/EarpieceOverlay.module.css
index e007fc44..e53a1974 100644
--- a/src/room/EarpieceOverlay.module.css
+++ b/src/room/EarpieceOverlay.module.css
@@ -2,40 +2,22 @@
   position: fixed;
   z-index: var(--call-view-overlay-layer);
   inset: 0;
-  display: none;
+  display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: var(--cpd-space-2x);
-}
-
-@keyframes fade-in {
-  from {
-    opacity: 0;
-    display: flex;
-  }
-  to {
-    opacity: 1;
-  }
+  transition: opacity 200ms;
 }
 
 .overlay[data-show="true"] {
-  animation: fade-in 200ms;
-}
-
-@keyframes fade-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-    display: none;
-  }
+  opacity: 1;
 }
 
 .overlay[data-show="false"] {
-  animation: fade-out 130ms forwards;
+  opacity: 0;
   pointer-events: none;
+  transition-duration: 130ms;
 }
 
 .overlay::before {

(I still see the overlay "flashing" for a single frame when animating in even with this change, sadly 😕 I remember that weird visual issue has been there from the start.)

[BillCarsonFr]

CSS animations are tricky - in my testing with this PR I now can't get the earpiece overlay to show up at all. Perhaps a CSS transition would be more appropriate here?

I did setup a playwright framework to test mobile, and earpiece mode.

I udpated the css to set the display as a static property of the selector, and then just animate the opacity (instead of "animating the display")
0ed7194#diff-4d9afa5c9219c46865c6e722facb7f6b2936297a8f833f354b389fcf91b6c492

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.overlay[data-show="true"] {
  display: flex;
  animation: fade-in 200ms;
}

So the default is display: none;, and will change if data-show="true" no more flicker.

[robintown]

The fade-out animation doesn't appear to be working any more (this is most apparent if you set the durations to 10x their normal values).

Screencast.From.2025-12-03.12-26-22.webm

Like we discussed, ditching the animations is probably fine, if you'd prefer to remove that CSS (But the above transition approach does actually work I think?)

[robintown]

Suggested change

	asMobile: async ({ browser }, puse) => {
	const fixtures = await createCallAndInvite(browser);
	await puse({
	asMobile: async ({ browser }, pUse) => {
	const fixtures = await createCallAndInvite(browser);
	await pUse({

So I know how to pronounce it :)

[BillCarsonFr]

eslint_does_not_want_that_we_call_it_use ? 🤣

[robintown]

Looks like this comment belongs in the other file

[BillCarsonFr]

Like we discussed, ditching the animations is probably fine, if you'd prefer to remove that CSS (But the above transition approach does actually work I think?)

There is still a small glitch, when earpiece overlay switches from hidden to visible there is a quick initial flash of the overlay background.
It is not visible the first time though

[toger5]

There is still a small glitch, when earpiece overlay switches from hidden to visible there is a quick initial flash of the overlay background.

This is still a great improvement to the current state.

[toger5]

Its nice to see that simplifying the css improved it.