The following code works fine on desktop and android mobile however it does not work on ios. I would appreciate any help to get me in the right direction.
https://jsfiddle.net/slash197/047c4dj8/6/
html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; } .holder { position: relative; width: 100%; height: 100%; overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .content { width: 100%; height: 128px; overflow-y: hidden; overflow-x: scroll; -webkit-overflow-scrolling: touch; } .row { width: 3000px; height: 100%; background-image: -webkit-linear-gradient( left, rgba(0, 0, 255, 0.0) 0%, rgba(0, 0, 255, 1.0) 100% ); } <div class="holder"> <div class="content"> <div class="row"></div> </div> <div class="content"> <div class="row"></div> </div> <div class="content"> <div class="row"></div> </div> <div class="content"> <div class="row"></div> </div> <div class="content"> <div class="row"></div> </div> <div class="content"> <div class="row"></div> </div> </div> 2 Answers
Answers 1
IOS Safari is ignoring the width in percentage change it into px and it will start working check the fiddel link below.
<!DOCTYPE html> <html> <head> <style> html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; } .holder { position: relative; width: 1000px; height: 100%; overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling-x: touch !important; } .content { width: 1000px; height: 128px; display:block; float:left; overflow-y: hidden; overflow-x: scroll; -webkit-overflow-scrolling-x: touch !important; } .row { width: 3000px; height: 100px; display:block; float:left; background-image: -webkit-linear-gradient( left, rgba(0, 0, 255, 0.0) 0%, rgba(0, 0, 255, 1.0) 100% ); } </style> </head> <body> <div class="holder"> <div class="content"> <div class="row"></div> </div> <div class="content"> <div class="row"></div> </div> <div class="content"> <div class="row"></div> </div> <div class="content"> <div class="row"></div> </div> <div class="content"> <div class="row"></div> </div> <div class="content"> <div class="row"></div> </div> <div class="content"> <div class="row"></div> </div> <div class="content"> <div class="row"></div> </div> <div class="content"> <div class="row"></div> </div> <div class="content"> <div class="row"></div> </div> <div class="content"> <div class="row"></div> </div> <div class="content"> <div class="row"></div> </div> <div class="content"> <div class="row"></div> </div> <div class="content"> <div class="row"></div> </div> <div class="content"> <div class="row"></div> </div> </div> </body> </html> Answers 2
I noticed in your listed code you set the .row class with a pre-defined width, thereby ensuring every <div> element with that class will require a scroll. I'm assuming it's the horizontal scroll that fails, correct? I don't have an iPhone, but I noticed someone mentioned that the above code works in iOS. Is it possible that in the actual code the content requiring a horizontal scroll is dynamically generated?
If so, have you tried to force the content to always be marked to scroll, similar to what you did above, by setting a fixed width or min-width property, possibly to a percentage > 100%?
<div class="holder"> <div class="content"> <div class="row" style="min-width: 101%"></div> </div> </div> I'm not an expert on iOS, but if it involves dynamically generated content, it's possible the problem could be an iOS scrolling quirk related to this issue.
iOS 9 `-webkit-overflow-scrolling:touch` and `overflow: scroll` breaks scrolling capability
0 comments:
Post a Comment