diff options
Diffstat (limited to 'src/client/components')
| -rw-r--r-- | src/client/components/media-list.vue | 35 |
1 files changed, 22 insertions, 13 deletions
diff --git a/src/client/components/media-list.vue b/src/client/components/media-list.vue index fb8824c5b4..2c5df4ecaa 100644 --- a/src/client/components/media-list.vue +++ b/src/client/components/media-list.vue @@ -40,7 +40,8 @@ export default Vue.extend({ }, data() { return { - gridInnerStyle: {} + gridInnerStyle: {}, + sizeWaiting: false } }, mounted() { @@ -59,20 +60,28 @@ export default Vue.extend({ }, size() { // for Safari bug - if (this.$refs.gridOuter) { - let height = 287; - const parent = this.$props.parentElement || this.$parent.$el; + if (this.sizeWaiting) return; - if (this.$refs.gridOuter.clientHeight) { - height = this.$refs.gridOuter.clientHeight; - } else if (parent) { - height = parent.getBoundingClientRect().width * 9 / 16; - } + this.sizeWaiting = true; - this.gridInnerStyle = { height: `${height}px` }; - } else { - this.gridInnerStyle = {}; - } + window.requestAnimationFrame(() => { + this.sizeWaiting = false; + + if (this.$refs.gridOuter) { + let height = 287; + const parent = this.$props.parentElement || this.$parent.$el; + + if (this.$refs.gridOuter.clientHeight) { + height = this.$refs.gridOuter.clientHeight; + } else if (parent) { + height = parent.getBoundingClientRect().width * 9 / 16; + } + + this.gridInnerStyle = { height: `${height}px` }; + } else { + this.gridInnerStyle = {}; + } + }); } } }); |