How to make a fixed webkit mask for div?


Suppose we have two blocks div superposed, the only difference between them is that in the lower block to the content div applied effect assume a black-white filter -webkit-filter: grayscale (100%);

If the div-block p2 reduced in size by height and synchronize scrolling then we will achieve the transition effect of color content in black-white.

However, site that I try to write is designed for mobile devices and iOS have problem with get dynamic position scrolling. As alternatively can use iscroll, but very slows work...

So idea came to cut div-block id="p2" using webkit-mask mask and to fix webkitmask relative to page. For more detail in the gif-animation:

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

<div id="p1" style="position:absolute;width:500px;height:1000px;z-index:1;-webkit-filter: grayscale(100%);">
some text

<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;">
some text


I put two superimposed block in common container and added -webkit-overflow-scrolling:touch. Now while scrolling two div-block (p1 and p2) are move simultaneously. On the top layer (id: p2), I added webkitmask -webkit-mask: url (heartmask.png) and make it fixed: -webkit-mask-attachment: fixed; Thus, the content should be clipped by the mask which supposedly should not move.

But -webkit-mask-attachment: fixed; does not work, and the mask is moved together with the whole page

I did not find any example with -webkit-mask-attachment: fixed;

And I think that I am wrong somewhere

Where is my mistake? How can I fix this?

Sorry for bad english...

Thank you

-webkit-mask-attachment: fixed; is not supported by the majority of browsers. It is supported only by Chome and Safari. (see the browser compatibility in MDN).

Try to use position:fixed for div#p2:

<div id="p2" style="position:fixed;"></div>