mastofe

commit: b369fc2de4ab0242775a56fb6208d9dbf2109d91
parent: 8c5eaf7ae9f78fa6bb8b2d999b36862484d12656
Author: Sorin Davidoi <sorin.davidoi@gmail.com>
Date:   Sat, 20 May 2017 01:26:46 +0200

feat: Use CSS contain to avoid computations (#3158)


Diffstat:
M
app/javascript/mastodon/features/notifications/index.js
6
+++++-
M
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
@@ -100,7 +100,9 @@ class Notifications extends React.PureComponent {
       unread = <div className='notifications__unread-indicator' />;
     }
 
-    if (isLoading || notifications.size > 0) {
+    if (isLoading && this.scrollableArea) {
+      scrollableArea = this.scrollableArea;
+    } else if (notifications.size > 0) {
       scrollableArea = (
         <div className='scrollable' onScroll={this.handleScroll} ref={this.setRef}>
           {unread}
@@ -119,6 +121,8 @@ class Notifications extends React.PureComponent {
       );
     }
 
+    this.scrollableArea = scrollableArea;
+
     return (
       <Column icon='bell' active={isUnread} heading={intl.formatMessage(messages.title)}>
         <ColumnSettingsContainer />
diff --git 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;