iOS issue: fixed position

In this example below you will see how to do a iOS issue: fixed position with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by guyom, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright guyom ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>iOS issue: fixed position</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="main">
    <div style="position: fixed; top: 0; left: 0; width: 100%; height: 150px; padding: 50px; background: rgba(0, 0, 0, 0.25);">
    <div style="transform: translate3d(0,0,0);">
        <input type="button" value="Input Button" />
        <button>Button</button>
    </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/guyom/ios-issue-fixed-position-vmmENg */
.main {
    position: relative;
    height: 1600px;
    background: gold;
    transform: translate3d(0,0,0);
}

.main * {
    transform: translate3d(0,0,0);
}

Comments