From b369fc2de4ab0242775a56fb6208d9dbf2109d91 Mon Sep 17 00:00:00 2001 From: Sorin Davidoi Date: Sat, 20 May 2017 01:26:46 +0200 Subject: [PATCH] feat: Use CSS contain to avoid computations (#3158) --- app/javascript/mastodon/features/notifications/index.js | 6 +++++- app/javascript/styles/components.scss | 3 +++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/app/javascript/mastodon/features/notifications/index.js b/app/javascript/mastodon/features/notifications/index.js index ff06a29549..ea4d9086bb 100644 --- a/app/javascript/mastodon/features/notifications/index.js +++ b/app/javascript/mastodon/features/notifications/index.js @@ -100,7 +100,9 @@ class Notifications extends React.PureComponent { unread =
; } - if (isLoading || notifications.size > 0) { + if (isLoading && this.scrollableArea) { + scrollableArea = this.scrollableArea; + } else if (notifications.size > 0) { scrollableArea = (
{unread} @@ -119,6 +121,8 @@ class Notifications extends React.PureComponent { ); } + this.scrollableArea = scrollableArea; + return ( diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index a6771cce0a..a2109838c9 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -1314,6 +1314,7 @@ .drawer { flex: 1 1 100%; overflow: hidden; + contain: strict; } @media screen and (min-width: 360px) { @@ -1488,6 +1489,7 @@ flex: 1 1 auto; backface-visibility: hidden; -webkit-overflow-scrolling: touch; + contain: strict; &.optionally-scrollable { overflow-y: auto; @@ -2234,6 +2236,7 @@ button.icon-button.active i.fa-retweet { flex: 1 1 auto; align-items: center; justify-content: center; + contain: strict; a { color: $ui-highlight-color;