Multiple elements causes .htc behavior script failure

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Create multiple items with curved-corner behavior attached 
2.
3.

What is the expected output? What do you see instead?
expected result: rounded corners on all elements
actual result: after about 20 elements (the number varies from computer to
comuter - as well as IE version) the .htc behavior causes IE to throw a
script error (code: 0)

What version of the product are you using? On what operating system?
version: v3
OS: 
Windows XP SP2 - IE 6
Windows Vista SP2 - IE8
Mac OS x 10.6 - Windows XP SP2 - IE 6 (Virtual) 

Please provide any additional information below.
I hate IE :(

Original issue reported on code.google.com by matthew....@gmail.com on 22 Dec 2009 at 8:54

[GoogleCodeExporter]

http://msdn.microsoft.com/en-us/library/ms531194(VS.85).aspx

There is a limit to the number of createStyleSheet() can be called.

DD_BelatedPNG uses a workaround http://www.dillerdesign.com/

Original comment by matthew....@gmail.com on 23 Dec 2009 at 7:06

[GoogleCodeExporter]

IE Limitation. That is what everything :)

Original comment by rahnas on 3 Jul 2010 at 1:33

• Changed state: Accepted

[GoogleCodeExporter]

Here is the offending code:  

    var css = el.document.createStyleSheet();
    css.addRule("v\\:roundrect", "behavior: url(#default#VML)");
    css.addRule("v\\:fill", "behavior: url(#default#VML)");

Currently if you have many elements with a particular class referencing this 
behaviour, a stylesheet is added for each and every one -- and it breaks at 31.

Unless the CSS must be added for each and every targetted element -- the CSS is 
constant, which makes me think 'no' -- then this alternative will work:

    for(var s=el.document.styleSheets,x=s.length-1;x>=0;x-=1 )
      if(s[x].title==="Border-Radius")
        break; 

    if( x === -1 ) { 
        css = el.document.createStyleSheet();
        css.title = "Border-Radius"
        css.addRule("v\\:roundrect", "behavior: url(#default#VML)");
        css.addRule("v\\:fill", "behavior: url(#default#VML)");
    }

This also increases load time -- 

Original comment by tyler.wa...@gmail.com on 29 Sep 2011 at 1:05