A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue.

[naveen305]

Hi Team,

am getting this issue 'A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue.' and css polyfill is not working

[naveen305]

Hi Team,

am getting this issue 'A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue.' and css polyfill is not working

[oslego]

Hi, @naveen305!

I briefly checked the included examples in the /demos folder with Firefox on Mac (browser which does not support CSS Shapes natively) and there are no errors.

Are you certain that the polyfill is causing the hang? Please provide a reduced test case for inspection.

Also, note that this polyfill is not being actively maintained.

[naveen305]

Hi @oslego Yes Script is busy in Mozilla and Internet Explorer in Windows

[Landerson352]

This may help -- exceedingly large stylesheets can cause the RegEx matching to take a very long time. https://github.com/adobe-webplatform/css-shapes-polyfill/blob/master/src/style-polyfill.js#L165

Might be a common issue with third party libraries or files containing large data URIs. (TypeKit was the culprit in my case, at over 167K characters. You could log yours and see where it goes awry.) A simple fix is to wrap the while loop in a condition to skip stylesheets that are over a certain length. I chose 20,000 characters and the problem was resolved.

[oslego]

Thank you, @Landerson352! That may be a good workaround.

Going forward, I do not recommend people use this polyfill as it is no longer maintained. Instead, I recommend using Feature Queries to detect support for CSS Shapes and use the native implementation instead. It will be much faster for the users that have it and prevent bad performance for users who don't.

Here's a usage example:

@supports ( shape-outside: circle() ) or ( -webkit-shape-outside: circle() ){
  .element {
    -webkit-shape-outside: circle();
    shape-outside: circle();
  }
}