CSS3 box-shadow inset painful performance killer

Question

After very hours debugging my app when I start first tests to deploy a Desktop executable with Awesomium (for Visual Studio 2010) I see a lot of render issues in webkit, since slow redraw and very slow IO when typing. At first I think it's because buffered Process API is unusable or had any issue on process IO buffering.

After that I start over a new project with Qt5 using Qt-Webkit (Again with Visual Studio 2010 SDK) and I had a worst performance.

Again after all this, I started another project from the scratch with Tide (Webkit/Linux) - and I was adding file by file and analyzing the app behavior.

Then I saw the application can ran with low CPU use and with 60 FPS on index.htm.

So after I put all JavaScript files from the original application in this new project he didn't change the frame rate. But when I put the CSS containing the Class below the application just started to consume 100% of CPU and the frame rate just dropped to ~10 FPS.

.overlay { 
    padding:30px 15px;
    background:#fff;
    background-color: #CCCCCC;
    background-image: -moz-linear-gradient(#F5F5F5, #CCCCCC);
    -webkit-box-shadow:0 5px 10px -10px rgba(0,0,0,0.50),0 1px 4px rgba(0,0,0,0.30),0 0 40px rgba(0,0,0,0.10) inset;
    -moz-box-shadow:0 5px 10px -10px rgba(0,0,0,0.50),0 1px 4px rgba(0,0,0,0.30),0 0 40px rgba(0,0,0,0.10) inset;
    box-shadow:0 5px 10px -10px rgba(0,0,0,0.50),0 1px 4px rgba(0,0,0,0.30),0 0 40px rgba(0,0,0,0.10) inset;
}

Example: http://jsfiddle.net/7BWAW/1/

How can I rewrite this Class, More precisely, how can I rewrite this class without box-shadow inset?

I tried without no luck using a transparent PNG as a background, but do not by far the contours are similar.

As the project has many occurrences of the box-shadow inset in CSS, if anyone can give me a light I have to improve the layout that is already approved - removing the box-shadow inset.

Answer 1

After all I found another technique using border-image

.overlay { 
    border:30px solid transparent;
    -webkit-border-image:url(http://s22.postimg.org/5blh30bkd/overlay_border.png) 30 30 stretch; /* Safari 5 and older */
    -o-border-image:url(http://s22.postimg.org/5blh30bkd/overlay_border.png) 30 30 stretch; /* Opera */
    border-image:url(http://s22.postimg.org/5blh30bkd/overlay_border.png) 30 30 stretch;
}

See the Fiddle solution: http://jsfiddle.net/7BWAW/3/

But have limtations - I can't use border-radius and I need to use another DIV inside container Class .overlay, but solves the most part of my problem.