Add workaround for Safari bug
This commit is contained in:
parent
b375bbc75c
commit
fb28b238cf
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="mk-media-list">
|
<div class="mk-media-list">
|
||||||
<div :data-count="mediaList.length">
|
<div :data-count="mediaList.length" ref="grid">
|
||||||
<template v-for="media in mediaList">
|
<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-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"/>
|
<mk-media-image :image="media" :key="media.id" v-else :raw="raw"/>
|
||||||
|
@ -20,6 +20,10 @@ export default Vue.extend({
|
||||||
raw: {
|
raw: {
|
||||||
default: false
|
default: false
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// for Safari bug
|
||||||
|
this.$refs.grid.style.height = `${this.$refs.grid.clientHeight}px`;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
@ -36,9 +40,9 @@ export default Vue.extend({
|
||||||
> div
|
> div
|
||||||
position absolute
|
position absolute
|
||||||
top 0
|
top 0
|
||||||
left 0
|
|
||||||
bottom 0
|
|
||||||
right 0
|
right 0
|
||||||
|
bottom 0
|
||||||
|
left 0
|
||||||
display grid
|
display grid
|
||||||
grid-gap 4px
|
grid-gap 4px
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue