Я не могу понять, почему эффект слайд-перехода не работает в iOS Safari.Он работает на рабочем столе (обычный / отзывчивый) с Chrome, IE11 и Mozilla.Он также работает на мобильных устройствах, но не во время тестирования на моем iPhone.Я думаю, что это не трансформация ширины, которая прослушивается, а непрозрачность (или видимость?), Потому что эффект слайда и содержимое внутри не видны, но когда я нажимаю большим пальцем на экран в течение некоторого времени, когда должно отображаться изображение,iPhone что-то узнал (он заметил «сохранить эту картинку»).
Я пытался изменить CSS и javascript: я пытался поставить / удалить префикс -webkit-, чтобы изменить атрибут цвета,Я также попытался добавить «видимость: видимый» в CSS или добавить более подробную информацию о переходе, как в этом примере: -webkit-transition: ширина 0,7 с линейная;
/* Open when someone clicks on the span element */
function openNav(divID) {
document.getElementById(divID).style.width = "100%";
var listItems = document.getElementsByClassName('myContent');
for (var i = 0; i < listItems.length; i++) {
setOpacity(listItems[i].getAttribute('id'), 1);
}
}
/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav(divID) {
document.getElementById(divID).style.width = "0%";
var listItems = document.getElementsByClassName('myContent');
for (var i = 0; i < listItems.length; i++) {
setOpacity(listItems[i].getAttribute('id'), 0);;
}
}
function actionNav(NavId, ContentId, ElemWidth, ElemOpacity) {
document.getElementById(NavId).style.width = ElemWidth;
setOpacity(ContentId, ElemOpacity);
}
function setOpacity(id, ElemOpacity) {
if (detectIE() > 0) {
document.getElementById(id).style.filter = "Alpha(Opacity=50)";
} else {
document.getElementById(id).style.opacity = ElemOpacity;
}
}
function CloseSayHelloFromAbout() {
actionNav("myNav2", "monContent2", "0", 0);
actionNav("myNav3", "monContent3", "100%", 1);
}
.overlay {
height: 100%;
opacity: 0.98;
width: 0;
position: fixed;
z-index: 3;
top: 0;
overflow-x: hidden;
background-color: black;
-webkit-transition: 0.7s;
transition: 0.7s;
.myContent {
position: relative;
top: 8%;
width: 100%;
text-align: center;
margin-top: 30px;
-webkit-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
}
<body>
<div class="container no-gutters" style="width:auto; padding-top:20px; padding-left:30px">
<div class="col">Hello World</div>
<div class="col-sm-1 blinkButton" style="width:auto; z-index:2"><span onclick="openNav('myNav')">WORK</span></div>
<div class="col-sm-1 blinkButton" style="width:auto; z-index:2"><span onclick="openNav('myNav2')">ABOUT</span></div>
</div>
<!-- The overlay -->
<div class="overlay" style="width: auto; height: auto">
<div id="myNav" class="overlay"><a href="javascript:void(0)" class="closebtn" onclick="closeNav('myNav')" style="font-size:25px">HOME</a>
<div id="monContent" class="overlay-content myContent">
<article> here all my content
</article>
</div>
</body>
Большое спасибо за вашу помощь!