How to solve fixed items issue in safari on iPhone?

I

invsm2015-10-29 01:05:23

css

invsm, 2015-10-29 01:05:23

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0" /> 
  <title>Document</title>
  <style type="text/css">
  html, body {
    height: 100%;
    width: 100%;		
    padding: 0;
    margin: 0;
    background-color: white;
  }
  .row {
    height: 100%;
    width: 3000px;
    background-color: blue;
  }

  .bar {
    width: 100%;
    height: 50px;
    position: fixed;	
    background-color: gray;
    text-align: center;
  }
  </style>
</head>
<body>
  <div class="bar">bar</div>	
  <div class="row"></div>	
</body>
</html>

On android in chrome everything is ok.
On iPhone 6 in Safari, body 100% = 414px, and the bar is 683px for some reason. When scrolling left / right, the bar scrolls, but slower than the entire page. Visually, the bar seems to be stretched to all 3000px.
But! In horizontal orientation, everything is fine: the bar is in place, equal in width to the body, does not move.. The problem is only in portrait.. What could be the reason?
ps - I understand that perhaps the problem is in the attributes of the meta viewport tag, if so, how to correctly specify the attributes for the "horizontal" page?

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

V

Vlad, 2015-10-29
@p1rat495

.row {
    height: 100%;
    width: 3000px;
    max-width: 100%;
    background-color: blue;
  }

should help