javascript - Webkit blur with transparent background

Question

In CSS3, I can easily blur anything with this:

-webkit-filter: blur(5px);
-moz-filter: ...

Right now, I am trying to create a draggable circle on top of text so that anything inside the area of that circle will be blurred:

position:absolute;
-webkit-filter: blur(3px);
background: rgba(255, 255, 255, .3);

This technically should work, but this is what I see instead:

　　　　

It looks buggy, and the most important part is that the text inside the semi-transparent circle is not blurred. Is there a way to fix it with CSS or JavaScript?

The example: http://jsfiddle.net/hSpHd/

Answer 1

The problem is that there is no suport for masking a filter. That is, the filter is applied to all the element. One workaround for this limitation is to have 2 elements, apply the filter to one, and mask it to transparency. Then you have the second (identical) element showing, unfiltered.

The CSS would be:

#one, #two {
    position: absolute;
    width: 200px;
    height: 400px;
    font-size: 18px;
}

#one {
    top: 20px;
    left: 20px;
    background: radial-gradient(circle, white 40px, lightblue 45px, transparent 50px); 
    background-position: -20px -20px;
}

#two {
    top: 0px;
    left: 0px;
    -webkit-filter: blur(2px);      
    -webkit-mask-position: -20px -20px;
    -webkit-mask-size: 200px 400px;
    -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 1) 32px, rgba(0, 0, 0, 0) 38px); 
    background-color: white;
}

abd the HTML is

<div id="one">Lorem ipsum ...
<div id="two">Lorem ipsum ....
</div>
</div>

that is 2 div nested, and with the same content.

Fiddle

Things that I don't like about that:

You need 2 divs with the same content.

You need to synchronize the mask position (in div 2) with the background position (in div1). You could set the circle in div 2 and maybe move everything at the same time, but then the circle is blurred.

But it's a start :-)

BTW, I have used everywhere the latest syntax of gradients. Since you are limited in compatibility from the beginning, I don't think you should care.

Answer 2

this might work -webkit-tap-highlight-color: transparent;