Как отключить прокрутку не сломав сайт в Safari?
Есть сайт и при открытии попапа блокируется прокрутка через присвоение body свойства overflow: hidden. На всех браузерах всё работает хорошо, есть фоновое размытие, а в сафари почему то при открытии поапа показывается размытый на фоне сайт но через секунду там уже белый сплошной фон. Если убрать задание overflow то всё работает нормально. Пробовал задавать min-height и height для body, но не помогло.
Вот сайт где такая проблема. Попап по клику на кнопку в блоке "Create your own poll", "Earn money by completing polls" (третий слайд) и "Share your professional..." (пятый слайд).
Вот часть кода для попапа (используется препроцессор stylus и vue3. Сайт на laravel):
const { default: axios } = require('axios');
const { createApp } = require('vue');
const body = document.body;
const page = document.querySelector('.scroll-wrapper');
// VUE 3
let popup = createApp({
data() {
return {
show: false,
success: false,
name: '',
email: '',
email_paypal: '',
brief: '',
variant: {},
variants: {
poll: {
type: 'poll',
title: 'Create your own poll',
textarea: true,
button: 'Try it now'
},
earn: {
type: 'earn',
title: 'Earn money by completing polls',
textarea: false,
button: 'Subscribe'
},
share: {
type: 'share',
title: 'Share your knowledge',
textarea: true,
button: 'Register'
},
}
}
},
methods: {
open(type) {
body.style.overflow = 'hidden';
page.style.filter = 'blur(25rem)';
this.name = this.email = this.email_paypal = this.brief = '';
this.variant = this.variants[type];
this.show = true;
},
close() {
body.style.overflow = 'auto';
page.style.filter = 'blur(0rem)';
this.show = false;
this.success = false;
},
send() {
document.body.style.cursor = "wait";
let formData = new FormData();
formData.append('name', this.name);
formData.append('email', this.email);
formData.append('email_paypal', this.email_paypal);
formData.append('brief', this.brief);
axios.post(URL + '/popup/' + this.variant.type, formData)
.then(response => {
this.name = this.email = this.email_paypal = this.brief = '';
this.success = true;
document.body.style.cursor = "unset";
});
},
},
mounted() {
}
})
.mount('#popup');
window.openPopup = popup.open;.popup
opacity 0
pointer-events none
z-index 9999
&.popup__show
opacity 1
pointer-events all
position fixed
top 0
left 0
right 0
bottom 0
overflow-y scroll
width 100% !important
background-color rgba(#fff, 0.1)
display flex
justify-content center
align-items flex-start
padding 30rem
.popup__content
z-index 99999
width 560rem
padding 40rem 60rem
border-radius basic-radius
background-color #fff
box-shadow 0 9rem 36rem 3rem rgba(#000, 0.05)
.popup__form
display flex
flex-direction column
gap 30rem
transition 0.2s opacity
.popup__text
display flex
flex-direction column
gap 24rem
.popup__title
font-size 26rem
font-weight 700
line-height 1
.popup__subtitle
font-size 16rem
font-weight 500
.popup__inputs
display flex
flex-direction column
gap 22rem
.popup__textarea
.popup__textarea-counter
text-align right
font-size 14rem
color rgba(black, 0.5)
&.popup__form_hide
opacity 0
pointer-events none
position relative
.popup__close
position absolute
top 30rem
right 30rem
width 30rem
cursor pointer
& > svg
width 100%
.popup__success
pointer-events none
opacity 0
transition 0.2s opacity
position absolute
top 0
left 0
right 0
bottom 0
display flex
flex-direction column
justify-content center
align-items center
gap 45rem
text-align: center
.popup__success-image
width 122rem
& > svg
width 100%
.popup__success-title
width 70%
font-size 36rem
font-weight 700
line-height 1.2
&.popup__success_show
opacity 1
pointer-events unset
.popup__bg
position absolute
top 0
left 0
right 0
bottom 0
z-index 0
@media all and (max-width tablet) // 800px
.popup
.popup__content
.popup__form
text-align left
@media all and (max-width mobile) // 500px
.popup
.popup__content
padding 50rem 18rem
.popup__form
.popup__text
.popup__title
font-size 20rem
.popup__subtitle
font-size 14rem
.input-text, .input-textarea
& > input, & > textarea, & > label
font-size 16rem
padding 12rem 18rem
.popup__close
top 18rem
right 18rem
width 25rem
<!-- begin snippet: js hide: false console: true babel: false --><div id="popup">
<div class="popup" :class="{ popup__show: show }">
<div class="popup__content">
<form method="POST" v-on:submit.prevent="send" class="popup__form" :class="{popup__form_hide: success}">
<div class="popup__text">
<div class="popup__title">@{{ variant.title }}</div>
<div class="popup__subtitle">
Please leave your contacts and a brief explanation of your poll below.
</div>
</div>
<div class="popup__inputs">
<x-input type="text" id="poll__name" name="name" placeholder="Name" vmodel="v-model=name" />
<x-input type="email" id="poll__email" name="email" placeholder="Email" vmodel="v-model=email" required />
<div v-if="variant.textarea" class="popup__textarea">
<x-input type="textarea" id="poll__brief" name="brief" placeholder="Describe your field and request for the survey" required minlength="100" maxlength="1000" vmodel="v-model=brief" />
<div class="popup__textarea-counter">@{{ brief.length }}/1000</div>
</div>
<template v-else>
<x-input type="email" id="poll__email" name="paypal_email" placeholder="Your PayPal Email*" required vmodel="v-model=email_paypal" />
</template>
</div>
<button type="submit">@{{ variant.button }}</button>
</form>
<div class="popup__success" :class="{popup__success_show: success}">
<div class="popup__success-image">
@svg('confetti')
</div>
<div class="popup__success-title">
Thank you! <br>We will contact you as soon as possible
</div>
</div>
<div class="popup__close" v-on:click="close">
@svg('close')
</div>
</div>
<div class="popup__bg" v-on:click="close"></div>
</div>
</div>