OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix initial letter avatar vertical offset in Firefox 

In at least Firefox, the case of relative positioned inline elements (such as
mx_BaseAvatar) with absolute positioned children (such as mx_BaseAvatar_initial)
is a dark corner full of spider webs. It will give different results during full
reflow of the page vs. incremental reflow of small portions. While that's surely
a browser bug, we can avoid it by using `inline-block` instead of the default
`inline`.

Fixes https://github.com/vector-im/riot-web/issues/5594
Might help with https://github.com/vector-im/riot-web/issues/9088

See also https://bugzilla.mozilla.org/show_bug.cgi?id=1535053 and
https://bugzilla.mozilla.org/show_bug.cgi?id=255139 for more details on browser
behavior in this case.
pull/21833/head
J. Ryan Stinnett 2019-03-14 17:50:03 +00:00
parent b29aa3d13d
commit 990d6dec15
1 changed files with 10 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
res/css/views/avatars/_BaseAvatar.scss
View File

@ -16,6 +16,16 @@ limitations under the License.
.mx_BaseAvatar {
position: relative;
// In at least Firefox, the case of relative positioned inline elements
// (such as mx_BaseAvatar) with absolute positioned children (such as
// mx_BaseAvatar_initial) is a dark corner full of spider webs. It will give
// different results during full reflow of the page vs. incremental reflow
// of small portions. While that's surely a browser bug, we can avoid it by
// using `inline-block` instead of the default `inline`.
// https://github.com/vector-im/riot-web/issues/5594
// https://bugzilla.mozilla.org/show_bug.cgi?id=1535053
// https://bugzilla.mozilla.org/show_bug.cgi?id=255139
display: inline-block;
}
.mx_BaseAvatar_initial {