CODEWITHSUNDEEP
htmlcssiossafari
MathiAs2Pique_
MathiAs2Pique_

Reputation: 153

CSS & Safari (iOS) - overflow y

Since iOS 14, contents in a div with an 'overflow-y: scroll' property don't seem to work on Safari, does anyone have a solution? (maybe it's just my code that doesn't work, too.)

I don't know why it does it now, i don't have debug tools on my phone (sadness...) But it was working under iOS 13.6.

I put an example underneath.

<html lang="fr">
  <style>
    html{
        background-color: var(--background);
        z-index: -9999;
    }

    body{
        position: relative;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        margin: 0;
        z-index: -9999;
    }
    .head{
      position: relative;
      display: block;
      top: 0;
      left: 0;
      right: 0;
      height: 10vh;
      background-color: blue;
      border-radius: 8px;
    }
    .emb-content{
      margin-top: 2vh;
      margin-bottom: 2vh;
      width: 96%;
      display: block;
      margin-left: 2%;
      margin-right: 2%;
      border-radius: 10px;
      height: 74.5vh;
      overflow-y: scroll;
      border: none;
      z-index: 9999;
      -webkit-appearance: none;
      -webkit-box-shadow: 0px 2px 10px -1px rgba(0,0,0,0.45);
      -moz-box-shadow: 0px 2px 10px -1px rgba(0,0,0,0.45);
      box-shadow: 0px 2px 10px -1px rgba(0,0,0,0.45);
    }
    .footer{
      display: block;
      position: relative;
      height: 10vh;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: yellow;
    }
  </style>
  <body>
    <div class='head'></div>
    <div class='emb-content'>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>add
    </div>
    <div class='footer'></div>
  </body>
</html>

Upvotes: 0

Views: 984

Answers (1)

clevertension
clevertension

Reputation: 7077

remove z-index: -9999;, z-index < 0 is not supported in ios 14

Upvotes: 1

Related Questions