Geek asks and answers

Ghost ghost ghost in Internet Explorer 9

I experience some ghosting, artifacts, or simply general perplexity when trying to use the window shadow in Internet Explorer 9.

The goal is to have a group of text areas that will highlight a window shadow when focused. This works without any problems in most browsers, but when cycling through elements in IE9, I see the following behavior:

Box Shadow Example

In the above example, the third text area loses focus in the second text area. The left and right sides of the window shadow do not disappear in the third text area and are not displayed on the second.

Below is the code to play. The problem arises when switching focus between the second and third text area.

HTML

<label>Text Area 1:</label>
<textarea class="sampleClass"></textarea><br /><br />
<label>Text Area 2:</label>
<textarea  class="sampleClass"></textarea><br /><br />
<label>Text Area 3:</label>
<textarea  class="sampleClass"></textarea><br /><br />

CSS

.sampleClass
{
    border:1px solid #ccc;
}

.sampleClass:focus
{
    box-shadow: 0px 0px 12px rgba(255,0,0,.8);
}

The code can also be seen here .

?

+5
1

... PIE!

http://css3pie.com/

" Internet Explorer 6-9 CSS3".

!

-2

More articles:


All Articles