diff --git a/resources/css/bem/chat-conversation-list.less b/resources/css/bem/chat-conversation-list.less
index 692c1090427..0abfb599bcd 100644
--- a/resources/css/bem/chat-conversation-list.less
+++ b/resources/css/bem/chat-conversation-list.less
@@ -53,4 +53,13 @@
       align-self: center;
     }
   }
+
+  &__layer {
+    .own-layer();
+
+    @media @mobile {
+      display: flex;
+      flex-direction: row;
+    }
+  }
 }
diff --git a/resources/css/utilities.less b/resources/css/utilities.less
index c578934f4cb..8f4e49230ab 100644
--- a/resources/css/utilities.less
+++ b/resources/css/utilities.less
@@ -61,6 +61,10 @@
   }
 }
 
+.u-full-size {
+  .full-size();
+}
+
 .u-hidden {
   display: none !important;
 }
@@ -85,10 +89,6 @@
   z-index: @z-index--nav-float !important;
 }
 
-.u-full-size {
-  .full-size();
-}
-
 .u-relative {
   position: relative;
 }
diff --git a/resources/js/chat/conversation-list.tsx b/resources/js/chat/conversation-list.tsx
index 8c5a9f4139a..758eb5369b1 100644
--- a/resources/js/chat/conversation-list.tsx
+++ b/resources/js/chat/conversation-list.tsx
@@ -2,6 +2,7 @@
 // See the LICENCE file in the repository root for full licence text.
 
 import { SupportedChannelType, supportedChannelTypes } from 'interfaces/chat/channel-json';
+import { chunk } from 'lodash';
 import { observer } from 'mobx-react';
 import core from 'osu-core-singleton';
 import * as React from 'react';
@@ -21,6 +22,11 @@ function renderChannels(type: SupportedChannelType) {
   if (channels.length > 0 || type === 'ANNOUNCE' && core.dataStore.chatState.canChatAnnounce) {
     const title = trans(`chat.channels.list.title.${type}`);
 
+    // Optimization so that the channel list can be rendered as several smaller layers.
+    // This shouldn't be too large, otherwise, Safari can't handle the layer; it also can't be
+    // too small, otherwise there'll be too many layout recalculations.
+    const chunks = chunk(channels, 100);
+
     return (
       <React.Fragment key={type}>
         <div className='chat-conversation-list__group'>
@@ -28,7 +34,11 @@ function renderChannels(type: SupportedChannelType) {
             <span className='chat-conversation-list__header-text'>{title}</span>
             <span className='chat-conversation-list__header-icon' title={title}><i className={icons[type]} /></span>
           </div>
-          {channels.map((channel) => <ConversationListItem key={channel.channelId} channel={channel} />)}
+          {chunks.map((c, index) => (
+            <div key={index} className='chat-conversation-list__layer'>
+              {c.map((channel) => <ConversationListItem key={channel.channelId} channel={channel} />)}
+            </div>
+          ))}
           {type === 'ANNOUNCE' && <CreateAnnouncementButton />}
         </div>
         <div className='chat-conversation-list-separator' />