CSS: -webkit-mask-image

Question

I\'m using the CSS property

-webkit-mask-image

To apply a mask over an image. However, in chrome, the mask moves as you scroll the image o

Answer 1

If I'm understanding your question correctly... You should be able to use SVG clip-path and then position your wrapper div however you like.

Working Example

body {
    height: 1800px;
}
#wrapper {
    position:absolute;
    top:100px;
    left:100px;
}
#map1 {
    width: 251px;
    height: 254px;
    -webkit-clip-path: url(#clipping);
    clip-path: url(#clipping);
}
svg {
    height:0;
}


    

Tested and working in Firefox and Chrome.