Use a diff type of blur one that does not flicker

stylesheets/_modules.scss

@@ -5856,18 +5856,19 @@ button.module-image__border-overlay:focus {
   }
 
   &__background {
-    background-repeat: no-repeat;
-    background-size: cover;
-    border-radius: 4px 4px 0 0;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
     height: 100%;
+    justify-content: center;
+    overflow: hidden;
     position: absolute;
     width: 100%;
 
     &--blur {
-      backdrop-filter: blur(7px);
-      backface-visibility: hidden;
-      background-color: $color-black-alpha-40;
-      border-radius: 4px 4px 0 0;
+      background-repeat: no-repeat;
+      background-size: cover;
+      filter: blur(25px);
       height: 100%;
       position: absolute;
       width: 100%;
@@ -6258,14 +6259,10 @@ button.module-image__border-overlay:focus {
 
   &__video {
     @include font-body-2;
-    align-items: center;
     background-color: $color-gray-80;
     border-radius: 8px;
     color: $color-white;
-    display: flex;
-    flex-direction: column;
     flex: 1 1 auto;
-    justify-content: center;
     margin-bottom: 24px;
     margin-top: 24px;
     max-width: 640px;

ts/components/CallBackgroundBlur.tsx

@@ -27,10 +27,9 @@ export const CallBackgroundBlur = ({
       };
 
   return (
-    <>
-      <div className="module-calling__background" {...backgroundProps} />
-      <div className="module-calling__background--blur" />
+    <div className="module-calling__background">
+      <div className="module-calling__background--blur" {...backgroundProps} />
       {children}
-    </>
+    </div>
   );
 };

ts/components/CallScreen.tsx

@@ -330,7 +330,9 @@ export class CallScreen extends React.Component<PropsType, StateType> {
     } else if (callState === CallState.Reconnecting) {
       message = i18n('callReconnecting');
     } else if (callState === CallState.Accepted && acceptedDuration) {
-      message = i18n('callDuration', [this.renderDuration(acceptedDuration)]);
+      message = i18n('callDuration', [
+        CallScreen.renderDuration(acceptedDuration),
+      ]);
     }
 
     if (!message) {
@@ -339,8 +341,7 @@ export class CallScreen extends React.Component<PropsType, StateType> {
     return <div className="module-ongoing-call__header-message">{message}</div>;
   }
 
-  // eslint-disable-next-line class-methods-use-this
-  private renderDuration(ms: number): string {
+  static renderDuration(ms: number): string {
     const secs = Math.floor((ms / 1000) % 60)
       .toString()
       .padStart(2, '0');

ts/components/CallingLobby.stories.tsx

@@ -54,7 +54,15 @@ const story = storiesOf('Components/CallingLobby', module);
 
 story.add('Default', () => {
   const props = createProps();
-  return <CallingLobby {...props} />;
+  return (
+    <CallingLobby
+      {...props}
+      callDetails={{
+        ...callDetails,
+        avatarPath: 'https://www.stevensegallery.com/600/600',
+      }}
+    />
+  );
 });
 
 story.add('No Camera', () => {