Scrolling breaks when html has too many nested elements


#1

So I’ve got an ionic app with a modal which injects html into a container. Everything works fine for the most part, but I have noticed that when beginning a scroll down gesture over images, nothing would happen. Happens on both iOS and Android.

After disabling all css and not seeing the issue resolved, I noticed that scroll gestures would begin to work if I removed outer containers from the elements which did not scroll. If I removed one container, scrolling would begin to work one container higher than it used to. Basically, scrolling would fail after a certain number of nested elements, regardless of the element type or their css class.

I had never seen this type of issue before, so as a sanity check I created a hardcoded test case, which confirmed that the scroll breaks on generic elements which are sufficiently nested.

My test was to put this hardcoded snippet in the root level of my html. When I do that I can scroll fine.

    <figure class="article-figure ZH">
        <div class="outer-container">
            <div class="image-container">
                <img class="article-image ZH" src=
                "http://mydomain.com//Multimedia/2016/03/09/Photos/ZH/MW-EH468_Trump__20160309065211_ZH.jpg?uuid=5bb1aa92-e5ed-11e5-8aab-0015c588e0f6"><cite>Reuters</cite>
            </div>
            <figcaption>
                Some caption text
            </figcaption>
        </div>
    </figure>

When I put the same snippet into the root level, but add five divs to nest it in, scrolling gesture detection within the deeper containers fails.

Has anyone come across this issue, and if so, how did you solve it short of restructuring your html?