Merge pull request #580 from LiskHQ/549-vertical-scroll-performance-b…

…ug-in-chrome Vertical scroll performance bug in chrome - Closes #549
LiskHQ · Mar 20, 2018 · 2e28c1f · 2e28c1f
2 parents ae220c0 + 5d619e4
commit 2e28c1f
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/src/components/delegateList/delegateList.css b/src/components/delegateList/delegateList.css
@@ -323,7 +323,6 @@
       color: var(--color-grayscale-dark);
       font-size: 16px;
       font-weight: 400;
-      transform: translateZ(0);
 
       &:last-child {
         font-weight: 300;
@@ -332,6 +331,10 @@
   }
 }
 
+.safariHack {
+  transform: translateZ(0);
+}
+
 .username {
   overflow: hidden;
   text-overflow: ellipsis;

diff --git a/src/components/delegateList/delegateList.js b/src/components/delegateList/delegateList.js
@@ -18,11 +18,18 @@ class DelegateList extends React.Component {
     this.state = {
       activeFilter: voteFilters.all,
       showChangeSummery: false,
+      safariClass: '',
     };
   }
 
   componentDidMount() {
     this.loadVotedDelegates(true);
+    if (navigator.userAgent) {
+      const agent = navigator.userAgent;
+      if (agent.indexOf('Safari') > 0 && agent.indexOf('Chrome') === -1) {
+        this.setState({ safariClass: styles.safariHack });
+      }
+    }
   }
 
   componentWillUpdate(nextProps) {
@@ -135,6 +142,7 @@ class DelegateList extends React.Component {
   getList(filteredList) {
     return filteredList.map(item => (
       <VotingRow key={item.address} data={item}
+        className={this.state.safariClass}
         voteToggled={this.props.voteToggled}
         voteStatus={this.props.votes[item.username]}
       />

diff --git a/src/components/delegateList/votingRow.js b/src/components/delegateList/votingRow.js
@@ -28,8 +28,8 @@ class VotingRow extends React.Component {
   }
 
   render() {
-    const { data, voteStatus, voteToggled } = this.props;
-    return (<ul className={`delegate-row ${styles.row} ${grid.row} ${setRowClass(voteStatus)}`}>
+    const { data, voteStatus, voteToggled, className } = this.props;
+    return (<ul className={`delegate-row ${styles.row} ${grid.row} ${className} ${setRowClass(voteStatus)}`}>
       <li className={`${grid['col-md-1']} ${grid['col-xs-2']} ${styles.leftText}`}>
         <Checkbox styles={styles}
           toggle={voteToggled}