A
A
Arkady Zimin2017-04-03 18:04:06
css
Arkady Zimin, 2017-04-03 18:04:06

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:
6183f2e867214f478e35651bddb68cae.PNG
How it is displayed on Safari (I show it not on an apple device for lack of such):
93ac9b2411154582923a53be35290f9d.jpg
There are also no elements if the page is run through PageSpeed ​​tools: I
b857c8911d9340fb8b79eb7d7b844e2c.PNG
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>

CSS code:
.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; }

What is the problem?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Arkady Zimin, 2017-04-04
@dagtec

Cured by simply moving the texts above the picture.
Thanks Ruslan for the tip))

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question