Answer the question
In order to leave comments, you need to log in
How to position z-index in safari ios?
There is a problem with displaying text in a block. In chrome, Yandex browser, and other browsers, everything is displayed correctly, but there is a problem in the Safari browser on iOS.
I am attaching screenshots.
Normal browsers:
How it is displayed on Safari (I show it not on an apple device for lack of such):
There are also no elements if the page is run through PageSpeed tools: I
am attaching a piece of block code:
<div class="col-md-4 col-xs-12"><a href="skidka-na-zavtraki.html">
<div class="akcii__item blockNw">
<div class="crop" style="overflow: hidden; position: relative;"><img src="/assets/components/phpthumbof/cache/zavtrak.a0c18e28bff5839713fb10ddccfb84281.png" alt="" class="" style="width: auto; height: 315px; top: 0px; left: -33.418px;"></div>
<div class="akcii__img"></div>
<h4 class="blockAc__zagolovok">Скидка на завтраки</h4>
<p class="blockAc__text">Конец зимы близок, осталось совсем немного подарочных -40% на все завтраки. Успейте позавтракать в нашем ресторане))</p>
</div>
</a>
</div>
.akcii__item {
height: 315px;
background: #000;
display: -webkit-flex !important;
display: -ms-flexbox !important;
display: flex !important;
overflow: hidden;
position: relative;
}
.akcii__img {
-webkit-transform: translate3d(0,0,0);
opacity: .99;
background-color: rgba(0, 0, 0, 0.35);
height: 315px;
position: absolute;
z-index: 1;
width: 100%; }
.blockNw {
-webkit-transform: translate3d(0,0,0);
margin-bottom: 15px;
border-radius: 4px;}
.blockAc__zagolovok, .blockAc__text {
color: #fff;
position: absolute;
z-index: 5;
margin: auto;
-webkit-transform: translate3d(0,0,0);
opacity: .99;}
.blockAc__zagolovok {
font-size: 24px;
padding: 15px;
top: 180px;
}
.blockAc__text {
top: 220px;
padding: 15px;
text-align: left;
max-height: 40px;
overflow: hidden;
text-overflow: ellipsis; }
Answer the question
In order to leave comments, you need to log in
Cured by simply moving the texts above the picture.
Thanks Ruslan for the tip))
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question