`-webkit-overflow-scrolling: touch` broken for initially offscreen elements in iOS7

Question

Seeing as GM seed has been released, we can talk about it now!

Looks like in iOS7 "-webkit-overflow-scrolling: touch" is broken. touch events for elements that are initially off screen do not fire (or in some cases are just unreliable).

Here is an example:

<!DOCTYPE html><html>
    <head><title>TEST</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="apple-mobile-web-app-capable" content="yes" />
    <style>

        #scrollbox {
                position: fixed;
                top: 0px;
                width: 100%;
                height: 100%;
                overflow: scroll;
                -webkit-overflow-scrolling: touch;
        }

        .touchDiv {
            position: relative;
            width:100%;
            height:80px;
            background-color: #FFBBBB;
        }

        ul, li {
            text-indent: 0px;
            list-style: none;
            padding: 0px;
            margin: 0px;
        }

        li {
            padding-top: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #333;
        }

    </style>
    <script type="text/javascript">

        function onBodyLoad() {
            var touchDiv = document.getElementById("bottomDiv");
            touchDiv.ontouchstart = function(e) {
                alert("touched");
            };

            touchDiv = document.getElementById("topDiv");
            touchDiv.ontouchstart = function(e) {
                alert("touched");
            };
        }
    </script>
    </head>


    <body onload="onBodyLoad()">


        <div id='scrollbox'>
                <div id="topDiv" class="touchDiv">Fires an event when touched</div>
                <ul>
                    <li><a href='#' onclick="alert('1')">Link 1</a></li>
                    <li><a href='#' onclick="alert('3')">Link 3</a></li>
                    <li><a href='#' onclick="alert('4')">Link 4</a></li>
                    <li><a href='#' onclick="alert('5')">Link 5</a></li>
                    <li><a href='#' onclick="alert('6')">Link 6</a></li>
                    <li><a href='#' onclick="alert('7')">Link 7</a></li>
                    <li><a href='#' onclick="alert('8')">Link 8</a></li>
                    <li><a href='#' onclick="alert('9')">Link 9</a></li>
                    <li><a href='#' onclick="alert('10')">Link 10</a></li>
                    <li><a href='#' onclick="alert('11')">Link 11</a></li>
                    <li><a href='#' onclick="alert('12')">Link 12</a></li>
                    <li><a href='#' onclick="alert('13')">Link 13</a></li>
                    <li><a href='#' onclick="alert('14')">Link 14</a></li>
                    <li><a href='#' onclick="alert('15')">Link 15</a></li>
                    <li><a href='#' onclick="alert('16')">Link 16</a></li>
                    <li><a href='#' onclick="alert('17')">Link 17</a></li>
                    <li><a href='#' onclick="alert('18')">Link 18</a></li>
                    <li><a href='#' onclick="alert('19')">Link 19</a></li>
                    <li><a href='#' onclick="alert('20')">Link 20</a></li>
                    <li><a href='#' onclick="alert('21')">Link 21</a></li>
                    <li><a href='#' ontouchstart="alert('22')">Link 22</a></li>
                </ul>
                <div id="bottomDiv" class="touchDiv">Fires an event when touched 2</div>

        </div>

</body>

I guess this will break the majority of mobile optimised web apps.

Any issues with the above code? And/or are there any workarounds?

(I have already raised a bug with apple - some time ago, and no response)

seems there is a history of problems with this http://stackoverflow.com/questions/7763458/ios5-webkit-overflow-scrolling-causes-touch-events-stopping-work?rq=1 - though slightly different issue. — Nick Hingston, Sep 11 '13 at 08:50

score 30 · Accepted Answer · answered Sep 11 '13 at 09:20

30

Looks like there is a workaround to this problem on apple dev forums

So many thanks to Mr Baicoianu.

Basically you need to listen to touch events on the parent scroll div. So in my case add:

document.getElementById("scrollbox").addEventListener('touchstart', function(event){});

to the onBodyLoad function.

I guess this is some event propagation issue, solved by listening at a higher level.

answered Sep 11 '13 at 09:20

Nick Hingston

8,724
3
50
59

1

This caused some interesting behavior on my site when applied. Certain images would not load (only on iOS devices). I can't explain it, but I am able to isolate the behavior. – Grant H. Nov 18 '13 at 04:37
1

Glad you found my answer useful! I submitted a Radar bug report to them a while back – maybe if more devs submit this bug it will gain a higher priority from Apple. – Nick Baicoianu Nov 21 '13 at 20:13
This solution worked for me. Of course the element I **WANT** as the target is deeply nested within the parent - so the event needs to bubble up through many levels until it gets to the parent scroll div. I wonder what the performance implications of this approach are? Do you have any idea? – mattstuehler Jan 31 '14 at 18:11
As this is only happening on touchstart, my impression would be the effect would be negligible unless your element is 1000s of parent elements deep - in which case you probably need to redesign anyway! – Nick Hingston Feb 02 '14 at 13:51
The simplest way to test this is in a debug console, in Safari at least when running the debugger against the IOS simulator I had to write it with single quotes, not double so: `document.getElementById('scrollbox').addEventListener('touchstart', function(event){});` But it solved my problem: strange behavior (empty touch zones) in IOS7, specially when using absolute positioned divs. – tomg Mar 13 '14 at 12:21
What a weird hack. I can't see what side effects this could cause. These kinds of workarounds are often the reason why many web apps are broken and behave kinda funky. – Timo Ernst Aug 07 '15 at 13:55
or maybe its because of the fact that the browser itself is buggy! hence the need for a workaround. side effects should be minimal...we are just listening to an event and ignoring the response... – Nick Hingston Aug 19 '15 at 10:14

score 7 · Answer 2 · edited Sep 12 '13 at 05:54

7

The above answer works a treat for me. Here is the jQuery version of the above fix:

$('#scrollbox').on('touchstart', function(event){});

edited Sep 12 '13 at 05:54

BoltClock

700,868
160
1,392
1,356

answered Sep 11 '13 at 22:47

DigitalJohn

281
3
12

`-webkit-overflow-scrolling: touch` broken for initially offscreen elements in iOS7

2 Answers2

Linked