Menu
I have a webpage with the following html:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div style='display:flex;flex-direction:column;height:100%;'>
<div style='overflow:auto'>
<div style='height:500px; background:green;'></div>
<div class='container'>
<div class='row'>
<div class='col-sm-6'>
<input type='text' style='' class='form-control' placeholder='swipe here' />
</div>
</div>
</div>
<div style='height:500px; background:blue;'></div>
</div>
</div>
</body>
</html>Load it on an iPhone. Try scrolling up and down by swiping. Now try scrolling by starting a swipe at the textbox that says 'swipe here'. With me, it won't scroll when I do that. I'm using an iPhone 6S.
Is this a bug? How can I work around it?
773
The issue is appearing on iPhone 6s and above.
It seems to be caused by the <div style='overflow:auto'>. When the overflow is removed, the page scrolls on swiping the textbox too.
Tested in safari on iPhone 6s, 6s+, 7, 8 and X. Hope this helps.
138
From user perspective, this is a bug.
When using bootstrap, you need to enclose the row class in a container class like the code below. The page obtains the properties to scroll left and right because of this CSS from bootstrap:
.row {
margin-right: -15px;
margin-left: -15px;
}
The example below with div.container helps to give restriction to the width of the app.
<div style='display:flex;flex-direction:column;height:100%;'>
<div style='overflow:auto'>
<div style='height:500px; background:green;'></div>
<!--This container is missing to get bootstrap row to work well-->
<div class="container">
<div class='row'>
<div class='col-sm-6'>
<input type='text' style='' class='form-control' placeholder='swipe here' />
</div>
</div>
</div>
<div style='height:500px; background:blue;'></div>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
