fix(avatar): use text instead of foreign object.

Reason: On Safari the foreign object is not scaled correctly.

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;
     }
-}
+}

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>
             );