mirror of https://github.com/mastodon/mastodon.git
feat: Use CSS contain to avoid computations (#3158)
parent
8c5eaf7ae9
commit
b369fc2de4
|
@ -100,7 +100,9 @@ class Notifications extends React.PureComponent {
|
||||||
unread = <div className='notifications__unread-indicator' />;
|
unread = <div className='notifications__unread-indicator' />;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (isLoading || notifications.size > 0) {
|
if (isLoading && this.scrollableArea) {
|
||||||
|
scrollableArea = this.scrollableArea;
|
||||||
|
} else if (notifications.size > 0) {
|
||||||
scrollableArea = (
|
scrollableArea = (
|
||||||
<div className='scrollable' onScroll={this.handleScroll} ref={this.setRef}>
|
<div className='scrollable' onScroll={this.handleScroll} ref={this.setRef}>
|
||||||
{unread}
|
{unread}
|
||||||
|
@ -119,6 +121,8 @@ class Notifications extends React.PureComponent {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.scrollableArea = scrollableArea;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Column icon='bell' active={isUnread} heading={intl.formatMessage(messages.title)}>
|
<Column icon='bell' active={isUnread} heading={intl.formatMessage(messages.title)}>
|
||||||
<ColumnSettingsContainer />
|
<ColumnSettingsContainer />
|
||||||
|
|
|
@ -1314,6 +1314,7 @@
|
||||||
.drawer {
|
.drawer {
|
||||||
flex: 1 1 100%;
|
flex: 1 1 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
contain: strict;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 360px) {
|
@media screen and (min-width: 360px) {
|
||||||
|
@ -1488,6 +1489,7 @@
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
backface-visibility: hidden;
|
backface-visibility: hidden;
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
|
contain: strict;
|
||||||
|
|
||||||
&.optionally-scrollable {
|
&.optionally-scrollable {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
@ -2234,6 +2236,7 @@ button.icon-button.active i.fa-retweet {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
contain: strict;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $ui-highlight-color;
|
color: $ui-highlight-color;
|
||||||
|
|
Loading…
Reference in New Issue