iOSで -webkit-overflow-scrolling: touch をつかうと上に要素がかぶっていてもスクロールしてしまう。

iOS7.1, iOS8.1, iOS8.4 で確認しました。

HTML

<div class="box">
    <div class="img"></div>
</div>
<div class="mask">
</div>

CSS

.box {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

.img {
    width: 1000px; height: 1000px;
    background: url(http://jsrun.it/assets/y/S/0/t/yS0tr.jpeg) center center no-repeat;
    background-size: cover;
}

.mask {
    position: fixed;
    top: 0; bottom: 0;
    left: 0; right: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 9999;
}

DEMO

http://jsrun.it/kimmy/vuzY

PCだと横スクロールしませんが、iOSのMobile Safariだと横スクロール可能です。

PCでも上に乗っている要素のpointer-eventsをnoneにすれば、スクロールに関しては同じ挙動になります。

CSS

.box {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

.img {
    width: 1000px; height: 1000px;
    background: url(http://jsrun.it/assets/y/S/0/t/yS0tr.jpeg) center center no-repeat;
    background-size: cover;
}

.mask {
    position: fixed;
    top: 0; bottom: 0;
    left: 0; right: 0;
    background: rgba(0, 0, 0, .6);
    pointer-events: none; // 追加
    z-index: 9999;
}