Databases
StackOverflow2013
Postsdbo
POCSS3 box-shadow inset painful performance killer
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS3 box-shadow inset painful performance killer
    text
    copied!<p>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.</p> <p>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.</p> <p>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.</p> <p>Then I saw the application can ran with low CPU use and with 60 FPS on index.htm. </p> <p>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.</p> <pre><code>.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; } </code></pre> <p><strong>Example:</strong> <a href="http://jsfiddle.net/7BWAW/1/" rel="nofollow">http://jsfiddle.net/7BWAW/1/</a></p> <p>How can I rewrite this Class, More precisely, how can I rewrite this class without box-shadow inset?</p> <p>I tried without no luck using a transparent PNG as a background, but do not by far the contours are similar.</p> <p>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.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload