From fb28b238cfa780b1c82ad23295b09898f24c1374 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Tue, 29 May 2018 13:21:38 +0900
Subject: [PATCH] Add workaround for Safari bug

---
 .../app/common/views/components/media-list.vue       | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/client/app/common/views/components/media-list.vue b/src/client/app/common/views/components/media-list.vue
index 6df2aa322..c6cb66716 100644
--- a/src/client/app/common/views/components/media-list.vue
+++ b/src/client/app/common/views/components/media-list.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="mk-media-list">
-	<div :data-count="mediaList.length">
+	<div :data-count="mediaList.length" ref="grid">
 		<template v-for="media in mediaList">
 			<mk-media-video :video="media" :key="media.id" v-if="media.type.startsWith('video')" :inline-playable="mediaList.length === 1"/>
 			<mk-media-image :image="media" :key="media.id" v-else :raw="raw"/>
@@ -20,6 +20,10 @@ export default Vue.extend({
 		raw: {
 			default: false
 		}
+	},
+	mounted() {
+		// for Safari bug
+		this.$refs.grid.style.height = `${this.$refs.grid.clientHeight}px`;
 	}
 });
 </script>
@@ -36,9 +40,9 @@ export default Vue.extend({
 	> div
 		position absolute
 		top 0
-		left 0
-		bottom 0
 		right 0
+		bottom 0
+		left 0
 		display grid
 		grid-gap 4px
 
@@ -54,7 +58,7 @@ export default Vue.extend({
 				grid-row 1 / 3
 			:nth-child(3)
 				grid-column 2 / 3
-				grid-row 2/3
+				grid-row 2 / 3
 		&[data-count="4"]
 			grid-template-columns 1fr 1fr
 			grid-template-rows 1fr 1fr