From 990d6dec154f117d2bdc96234eea3a38b467dbdb Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Thu, 14 Mar 2019 17:50:03 +0000 Subject: [PATCH] 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. --- res/css/views/avatars/_BaseAvatar.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/res/css/views/avatars/_BaseAvatar.scss b/res/css/views/avatars/_BaseAvatar.scss index ee2d9c190f..91b2d6c426 100644 --- a/res/css/views/avatars/_BaseAvatar.scss +++ b/res/css/views/avatars/_BaseAvatar.scss @@ -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 {