haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Reason: On Safari the foreign object is not scaled correctly.
This commit is contained in:
Hristo Terezov 2020-04-20 18:14:11 -05:00
parent 547d1547bb
commit 9bdaea4069
2 changed files with 10 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
css/_avatar.scss
View File

@ -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 { .avatar-svg {
height: 100%; height: 100%;
width: 100%; width: 100%;
@ -63,4 +51,4 @@
@include avatarBadge; @include avatarBadge;
background-color: $presence-idle; background-color: $presence-idle;
} }
} }

17
react/features/base/avatar/components/web/StatelessAvatar.js
View File

@ -79,14 +79,15 @@ export default class StatelessAvatar extends AbstractStatelessAvatar<Props> {
viewBox = '0 0 100 100' viewBox = '0 0 100 100'
xmlns = 'http://www.w3.org/2000/svg' xmlns = 'http://www.w3.org/2000/svg'
xmlnsXlink = 'http://www.w3.org/1999/xlink'> xmlnsXlink = 'http://www.w3.org/1999/xlink'>
<foreignObject <text
height = '100%' dominantBaseline = 'central'
width = '100%'> fill = 'rgba(255,255,255,.6)'
<span fontSize = '40pt'
className = 'avatar-foreign'> textAnchor = 'middle'
{ initials } x = '50'
</span> y = '50'>
</foreignObject> { initials }
</text>
</svg> </svg>
</div> </div>
); );