Performance Hit When Using CSS box-shadow With Text Boxes

Just finished debugging a problem where I had text boxes whose performance was terrible. There was a noticeable lag between input and display and it was not usable.

After looking around it turned out the CSS3 box-shadow I had on the parent div which contained these text boxes was causing the performance hit. I assume that each time you type a letter, the browser has to re-render the box-shadow. I was using a box shadow of type inset for an inner gradient look so your results may differ with different box shadow types.

I removed the box shadow and immediately saw an improvement. For now I have no solution as it's not a 100% needed feature. If it comes to it, I will look for a solution and update with the answer.

Update: When using javascript to hide and show an element, box-shadow should be avoided due to the poor rendering performance within browsers. If a hidden element has box-shadow and is shown, there will be noticeable pause before the element is actually shown. Once again, I can only confirm this for when the box-shadow type is inset.

Example

Below is an HTML snippet that will produce the results I have detailed. Due to the filtering of input on my own site, I can't show a live demo. Just copy and paste the snippet below into an html file and open it locally. You should see the performance hit. If not let me know!

The HTML

   <!DOCTYPE html>
    <html>
    <head>
      <title>Box-Shadow Performance Hit</title>
    </head>
    <body>
    <div style = "padding: 15px 20px; border: 1px solid #c2c2c2; -webkit-box-shadow: inset 0 0 200px #ddd; -moz-box-shadow: inset 0 0 200px #ddd; box-shadow: inset 0 0 200px #ddd;">
     <input type="text" size="60">
    </div>
    <div>
     <input type="text" size="60">
    </div>
    </body>
    </html>
Short URL: http://gl2.ca/g