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: