
Я добавил простое раскрывающееся объявление на мой сайт, которое будет показано через X секунд, макет сайта такой же, как и раньше.
На каждом устройстве, которое я проверял, все работает отлично, кроме моего собственного :) в chrome, макет все грязный, как вы видите на картинке выше, но в другом браузере все в порядке.
Вы можете увидеть сайт здесь: https://www.start -2-code.com /
Я добавил все необходимые префиксы для Chrome, а такжедважды проверил сайт, используя Chrome на разных устройствах, но я не могу найти проблему
<div class = "image_pop">
<div class="image_pop_up" >
<a href="#main__content" class="image_pop_up_close">×</a>
<a href="https://click.linksynergy.com/fs-bin/click?id=ZmWG8YDQO/4&offerid=507388.4670&subid=0&type=4">
<img
class = "image_pop_up_image"
alt="The Official Alibaba Course for only $10.99."
src="https://mproxy.banner.linksynergy.com/fs/banners/39197/39197_1622.png">
</a>
</div>
</div>
CSS-код
.image_pop {
height: 100vh;
width: 100%;
position: fixed;
background-color: rgba(0, 0, 0, 0.6);
z-index: 10;
-webkit-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
opacity: 0;
visibility: hidden;
margin: 0 auto; }
.image_pop_up {
width: 50vw;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-box-shadow: 0 -2rem 6rem rgba(0, 0, 0, 0.8);
box-shadow: 0 -2rem 6rem rgba(0, 0, 0, 0.8); }
@media only screen and (max-width: 31.25em) {
.image_pop_up {
width: 70vw; } }
.image_pop_up_close {
color: black;
text-decoration: none;
line-height: 1;
font-size: 4rem;
position: absolute;
top: .5rem;
left: 1rem; }
.image_pop_up_image {
max-width: 100%;
max-height: 100%; }
Я предполагаю, что у нас установлена другая версия Chromeразные устройства, так вот в чем причина проблемы?