tykayn/mastodon
1
0
Fork 0
mirror of https://framagit.org/tykayn/mastodon.git synced 2023-08-25 08:33:12 +02:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sorin Davidoi 2017-05-20 01:26:46 +02:00 committed by Eugen Rochko
parent 8c5eaf7ae9
commit b369fc2de4
2 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/javascript/mastodon/features/notifications/index.js
View File

@ -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 />

3
app/javascript/styles/components.scss
View File

@ -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;