4

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>
Marian Paździoch
  • 8,813
  • 10
  • 58
  • 103
slash197
  • 9,028
  • 6
  • 41
  • 70
  • please explain what you are trying to do? What you have tried? – Ankur_009 Jan 31 '18 at 08:56
  • @Ankur_009 Thanks for the negative vote. What I'm trying to do is in the title, what I have tried is the code I provided along with jsfiddle link to test it. – slash197 Jan 31 '18 at 08:58
  • Did you intentionally leave the -webkit-scrolling-overflow rule out of the js fiddle? If I'm using the code you posted above, the scroll works as it should in iOS, however your fiddle code does not. – Jesse Feb 03 '18 at 19:36
  • Why the Android tag ? – Javier Delgado Feb 08 '18 at 16:44

2 Answers2

3

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>

https://jsfiddle.net/pe6t29kf/11/

Varun Malhotra
  • 1,202
  • 3
  • 15
  • 28
0

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

jess
  • 769
  • 2
  • 8
  • 15