Как сделать фиксированную webKit-маску для DIV блока?

Допустим, у нас есть два блока div, наложенных друг на друга, единственное их отличие - это то, что в нижнем блоке div к контенту применен эффект - допустим, черно-белый фильтр -webkit-filter: grayscale(100%);:

<div id="p1" style="position:absolute;z-index:1;-webkit-filter: grayscale(100%);"></div>
<div id="p2" style="position:absolute;z-index:2;"></div>

Если блок p2 уменьшить в размере и синхронизировать скролл, то мы добьемся эффекта перехода цветного контента в черно-белый .
Однако сайт, который я пишу, предназначен для мобильных устройств, и в iOS возникла проблема невозможности определить динамичную позицию scroll'а.
Как вариант нужно переходит к нативному скроллу и использовать, ну, к примеру, iscroll. Но подобная реализация достаточно сильно грузит мобильное устройство.
Поэтому пришла идея обрезать блок div id="p2", используя маску webkit-mask, и зафиксировать эту маску относительно страницы.
Более подробно в анимации: http://outsins.com/mask.gif

Вот, собственно, сам код:

   <div id="scroll" style="-webkit-overflow-scrolling:touch;left:200px;width:500px;height:500px;">

    <div id="p1" style="position:absolute;width:500px;height:1000px;z-index:1;-webkit-filter: grayscale(100%);">
Некоторый текст
    </div>

    <div id="p2" style="position:absolute;width:500px;height:1000px;z-index:2; color: blue;
    -webkit-mask:url(heartmask.png) no-repeat center center;-webkit-mask-attachment: fixed;">
Некоторый текст
    </div>
    </div>

Я положил два наложенных блока в общий контейнер и добавил к нему тач-скролл.
Теперь во время скролинга будут двигаться одновременно два div'а (p1 и p2) на верхний слой я добавил маску -webkit-mask:url(heartmask.png) и сделал маску фиксированной -webkit-mask-attachment: fixed;.
Таким образом, контент должен обрезаться по маске, которая якобы должна не двигаться, и должен виднеться нижний слой с примененным эффектом.
Но -webkit-mask-attachment: fixed; не работает, и маска перемещается вместе со всей страницей, хотя поддерживается браузерами на ios и android. =(

Возможно, я что-то делаю неправильно, так как не нашел ни единого примера с фиксированной маской в Интернете. =(

В итоге получается так: http://outsins.com/mask2.gif

Где моя ошибка? Как можно исправить?
Ценю любую помощь...