Fix scroll button on iOS

client/components/Chat.vue

@@ -57,7 +57,16 @@
 				<div
 					v-else
 					class="chat-content">
+					<transition name="fade">
+						<div
+							v-if="!channel.scrolledToBottom"
+							class="scroll-down"
+							@click="$refs.messageList.jumpToBottom()">
+							<div class="scroll-down-arrow" />
+						</div>
+					</transition>
 					<MessageList
+						ref="messageList"
 						:network="network"
 						:channel="channel" />
 					<ChatUserList

client/components/MessageList.vue

@@ -45,18 +45,6 @@
 					@linkPreviewToggle="onLinkPreviewToggle" />
 			</template>
 		</div>
-
-		<transition name="fade">
-			<div
-				v-if="!channel.scrolledToBottom"
-				class="scroll-down"
-				@click="jumpToBottom()">
-				<div class="scroll-down-arrow" />
-				<div
-					v-if="channel.unread > 0"
-					class="scroll-down-number">{{ channel.unread }}</div>
-			</div>
-		</transition>
 	</div>
 </template>
 

client/css/style.css

@@ -1104,27 +1104,13 @@ background on hover (unless active) */
 	cursor: pointer;
 }
 
-.scroll-down-number {
-	background: #84ce88;
-	border-radius: 50%;
-	text-align: center;
-	width: 30px;
-	height: 30px;
-	line-height: 30px;
-	font-size: 12px;
-	margin-left: 9px;
-	z-index: 23;
-	position: absolute;
-	top: -20px;
-	font-weight: bold;
-}
-
 .scroll-down-arrow {
 	width: 48px;
 	height: 48px;
 	line-height: 48px;
 	border-radius: 50%;
 	background: #fff;
+	color: #333;
 	border: 1px solid #84ce88;
 	text-align: center;
 }