Merge pull request #6127 from matrix-org/gsouquet/css-containment

Add CSS containment rules for shorter reflow operations
This commit is contained in:
Germain 2021-06-03 08:10:29 +01:00 committed by GitHub
commit 430cfa9c06
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 16 additions and 0 deletions

View file

@ -16,6 +16,7 @@ limitations under the License.
.mx_DecoratedRoomAvatar, .mx_ExtraTile {
position: relative;
contain: content;
&.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {
mask-image: url('$(res)/img/element-icons/roomlist/decorated-avatar-mask.svg');

View file

@ -198,6 +198,7 @@ limitations under the License.
// as the box model should be top aligned. Happens in both FF and Chromium
display: flex;
flex-direction: column;
align-self: stretch;
mask-image: linear-gradient(0deg, transparent, black 4px);
}

View file

@ -19,6 +19,10 @@ limitations under the License.
margin-bottom: 4px;
padding: 4px;
contain: strict;
height: 40px;
box-sizing: border-box;
// The tile is also a flexbox row itself
display: flex;