Modal.vue

<style type="text/css">
.modal-mask {
    z-index: 1000;
    background-color: rgba(0, 0, 0, .6);
    transition: opacity .3s ease;
}

.modal-container {
    max-height: 80vh;
    transition: transform .2s ease, max-width .1s ease;
}

.modal-enter {
  opacity: 0;
}

.modal-leave-active {
  opacity: 0;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
  transform: scale(1.1);
}
</style>

<template>
    <portal to="modals" v-if="show">
        <transition name="modal" appear>
            <div ref="mask" class="modal-mask px-2 sm:px-4 sidebar:px-6 fixed pin w-full h-full flex justify-between items-center" @click="clickClose">
                <div class="modal-container mx-auto flex flex-col rounded bg-white w-full shadow-lg" :style="{ 'max-width': maxWidth+'px', 'overflow': overflow }">
                  <slot></slot>
                </div>
            </div>
        </transition>
    </portal>
</template>

<script>
export default {
    props: {
        show: {
            type: Boolean,
            default: false,
        },
        maxWidth: {
            type: Number,
            default: 650,
        },
        overflow: {
            type: String,
            default: 'auto',
        },
    },
    data() {
        return {
            iOS: null,
            iOS11: null,
            scrollTop: null,
        }
    },
    methods: {
        clickClose(event) {
            if (this.$refs.mask === event.target) {
                this.close()
            }
        },
        close() {
            this.$emit('close')
        }
    },
    mounted() {
        this.iOS = /iPad|iPhone|iPod/.test(navigator.userAgent)
        this.iOS11 = /OS 11_[012]/.test(navigator.userAgent)

        document.addEventListener('keydown', (e) => {
            if (this.show && e.keyCode == 27) {
                this.close()
            }
        })
    },
    watch: {
        show(show) {
            document.body.style.overflow = show ? 'hidden' : 'visible'

            if (show && this.iOS && this.iOS11) {
                this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
                document.body.style.position = 'fixed'
            } else if (!show && this.iOS && this.iOS11) {
                document.body.style.position = 'static'
                document.documentElement.scrollTop = document.body.scrollTop = this.scrollTop
            }
        },
    },
}
</script>

More information the horrible iOS check can be found here: https://stackoverflow.com/questions/47768592/ios-11-fixed-modal-bug and https://hackernoon.com/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8.

Thanks for sharing @reinink.