From 9bdaea406959ed1521f55a80b3f7ac78405f75b6 Mon Sep 17 00:00:00 2001
From: Hristo Terezov <hristo@jitsi.org>
Date: Mon, 20 Apr 2020 18:14:11 -0500
Subject: [PATCH] fix(avatar): use text instead of foreign object.

Reason: On Safari the foreign object is not scaled correctly.
---
 css/_avatar.scss                                | 14 +-------------
 .../avatar/components/web/StatelessAvatar.js    | 17 +++++++++--------
 2 files changed, 10 insertions(+), 21 deletions(-)

diff --git a/css/_avatar.scss b/css/_avatar.scss
index 347d4bd18..9c0d88bdd 100644
--- a/css/_avatar.scss
+++ b/css/_avatar.scss
@@ -20,18 +20,6 @@
     }
 }
 
-.avatar-foreign {
-    align-items: center;
-    bottom: 0;
-    display: flex;
-    font-size: 40pt;
-    justify-content: center;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-}
-
 .avatar-svg {
     height: 100%;
     width: 100%;
@@ -63,4 +51,4 @@
         @include avatarBadge;
         background-color: $presence-idle;
     }
-}
\ No newline at end of file
+}
diff --git a/react/features/base/avatar/components/web/StatelessAvatar.js b/react/features/base/avatar/components/web/StatelessAvatar.js
index 619046e97..e1ed31bfb 100644
--- a/react/features/base/avatar/components/web/StatelessAvatar.js
+++ b/react/features/base/avatar/components/web/StatelessAvatar.js
@@ -79,14 +79,15 @@ export default class StatelessAvatar extends AbstractStatelessAvatar<Props> {
                         viewBox = '0 0 100 100'
                         xmlns = 'http://www.w3.org/2000/svg'
                         xmlnsXlink = 'http://www.w3.org/1999/xlink'>
-                        <foreignObject
-                            height = '100%'
-                            width = '100%'>
-                            <span
-                                className = 'avatar-foreign'>
-                                { initials }
-                            </span>
-                        </foreignObject>
+                        <text
+                            dominantBaseline = 'central'
+                            fill = 'rgba(255,255,255,.6)'
+                            fontSize = '40pt'
+                            textAnchor = 'middle'
+                            x = '50'
+                            y = '50'>
+                            { initials }
+                        </text>
                     </svg>
                 </div>
             );