A lot of people know we're doing it FineUI Control library <>, And we've done more than 9
Year time , In countless interactions with browsers , It also found that multiple browsers BUG, And make it public for your reference :

* share IE7 A magical BUG( It's not about closed labels , It is IE7 Of BUG)
* Chrome53 The latest version of the magazine is out of order BUG! <>
* Chrome the latest version (53-55) Again BUG! <>

This kind of BUG The reason why they are so disgusted , Because of its concealment , Most of the time, we can't use conventional logic to analyze . Another reason is that developers are usually kind-hearted , Always find the reason for the problem , Few doubt it IDE, Browser these development tools .

The truth is , Browsers are also developed by developers , It's a piece of software BUG!


Today's public one IE11 Of Crash BUG And depressed me for a long time , I finally got it today , Ha ha ha ha ......


discover problems

FineUI( professional edition ) Actually 2016 year 3 month <>
On the desktop , Tablet and mobile browser are adapted , And add animation effect to mobile browser (iOS Next Webkit and Andriod Next Chrome), But this CSS3 Animation is limited to
WebKit browser , Not supported Firefox,Edge,IE11 Waiting browser .

Recently in version update , I want to CSS3 Animation effect extended to desktop version Firefox,Edge and IE11 Waiting browser , In the development process , Suddenly one day , I find IE11 Just open the debugging tool (F12), The browser crashed , prove effective every time :

IE11 No problem opening the page below , But as long as F12 Open debugging tool , Browser now Crash, Click the debug button , Error message occurred :

Unhandled exception at 0x754ED8D3 (KernelBase.dll) in iexplore.exe:
0xC0000005: Access violation writing location 0x08090FFC.

Looks like a memory write error , For pure front-end developers , It's helpless to meet such a problem :


Analyze problems

Fortunately, , Last version of FineUI( professional edition ) No similar problems , Because a lot of code has been updated at this time , So the next step is a long code comparison phase ....





After nearly a day of analysis , The problem is focused on CSS3 Of keyframes Keywords and IFrame Appears when used together , I wrote two test pages :

<!DOCTYPE html> <html> <head runat="server"> <title></title> </head> <body> <
formid="form1" runat="server"> <f:PageManager ID="PageManager1" runat="server"
/> <iframe src="./test2.aspx"></iframe> </form> </body> </html>

<!DOCTYPE html> <html> <head runat="server"> <title></title> </head> <body> <
formid="form1" runat="server"> <f:PageManager ID="PageManager1" runat="server"
/> <f:Button Text=" Button " runat="server" /> </form> </body> </html>

test2.aspx Generated HTML The code is as follows :
<!DOCTYPE html> <html xmlns=""> <head> <meta
http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv
="Content-Type" content="text/html;charset=utf-8" /> <link type="text/css" rel
="stylesheet" href="/res.axd?css=f.css&t=636364679643916663"/> <link type
="text/css" rel="stylesheet" href
="/res.axd?css=themes.default.theme.css&t=636264594331716901"/> <title> </title
></head> <body> <form name="form1" method="post" action="test2.aspx" id="form1">
.....<div id="ctl02_wrapper" class="f-inline-block"></div> <script type
="text/javascript" src="/res.axd?js=f.js&t=636364680829342350"></script> <script
type="text/javascript" src="/res.axd?js=lang.zh_CN.js&t=636364679651261140"></
script> <script type="text/javascript"> //<![CDATA[ F.load(function () {
F.f_init({ theme:'default', baseUrl : '/', displayMode: 'normal', _version: '
3.7.0', _customId: '0oOOoo' }); F.f_pagemanager = new F.Component({ f_state:
{}, id:'PageManager1', name: 'PageManager1', hidden: true }); var f1 = new
F.Button({ f_state: {}, id:'ctl02', name: 'ctl02', renderTo: '#ctl02_wrapper',
text:' Button ', handler: function () { F.f_disable('ctl02'); __doPostBack('ctl02', ''
); } }); });//]]> </script> </form> </body> </html>

For the convenience of debugging , We put test2.aspx Referenced in CSS Download the file , And update test2.aspx by :
<!DOCTYPE html> <html> <head> <title></title> <link type="text/css" rel
="stylesheet" href="/res.axd?css=f.css&t=636364679643916663"/> </head> <body> </
body> </html>

The problem remains ,F12 Browser as usual Crash. Follow the principle of doubting everything , We put res.axd Download the loaded resource file locally f.css, And put the test2.aspx
Change to :
<!DOCTYPE html> <html> <head> <title></title> <link type="text/css" rel
="stylesheet" href="f.css"/> </head> <body> </body> </html>

At this point, the problem disappears !! So we have to wonder res.axd?css=f.css and f.css Different response headers for , Because they're the same thing .

In hindsight, the suspicion is wrong , Everyone will do it afterwards , But it's really a similar nonsense BUG Time , I still doubt that everything is good , We even compare the response headers , The only difference is :

Content-Type:text/css; charset=utf-8

then , We tried to modify  res.axd?css=f.css, Make it and f.css It's exactly the same , Still not , Browser still crashes .


Depressed ....


Dead End

since  res.axd?css=f.css and f.css   The response headers of are exactly the same , The content is exactly the same , But the effect is quite different , A cause IE11 collapse , And the other won't !

ok , We have to question both URL It's different , Let's compare them carefully :
<link type="text/css" rel="stylesheet" href
="/res.axd?css=f.css&t=636364679643916663"/> (IE11 Crash when opening debugging tools ) <link type
="text/css" rel="stylesheet" href="f.css"/> (IE11 Do not crash when opening debugging tools )

Is it ... Is it ... Is it ... Is it ... Is it ...


The most unlikely thought came to me , Is it the first one URL It's too long ???

Don't be funny , How could it be ,Windows The path to the file seems to have a length limit , but , but , but , but , this URL It's really not long ....

impossible ... forget it ... It's not about this place ....




no way , Still think of yourself as a fool , I will URL Make it shorter , See if there's a problem , I had a rough time deleting the last number 3, hold :


Change to :



Problems disappear !!!!!


I'm going to scream , Is it true URL It's too long , Just one more character !!!


After a thrill , It's a depression , Because I put URL It's lengthened , The same problem disappears :



Think again

ok , I'm a little incoherent , After many doubts , negative , Second doubt , After negation , We're finally able to reproduce the problem , It's very simple :


IFrame This one in CSS In files and parent pages CSS file URL Caused by the same ( instead of URL Length problem )!


thus , We can simply reproduce the following ( Download reproducible compressed package ,IE11 After opening ,F12 Direct collapse

<!DOCTYPE html> <html> <head> <title></title> <link type="text/css" rel
="stylesheet" href="fineui.css" /> </head> <body> <iframe src="./test2.html"></
iframe> </body> </html>
<!DOCTYPE html> <html> <head> <title></title> <link type="text/css" rel
="stylesheet" href="fineui.css" /> </head> <body> </body> </html>
@keyframes slideLeftIn { 0% { opacity: 0; } 100% { opacity: 1; } }

stay IE11 Open in test1.html,F12 Open debug window , Browser crashes immediately !!!



That's right 《 Three moves to kill you IE11》

It was later discovered , No need for this question iframe Can also be reproduced , As long as two conditions are met , Collapse immediately :

* Page load same CSS Document twice
* CSS File contains @keyframes Definition of

Here is a simple test example ( Download reproducible compressed package ,IE11 After opening ,F12 Direct collapse

Step 1 : Create a new one test3.html file :
<!DOCTYPE html> <html> <head> <title></title> <link type="text/css" rel
="stylesheet" href="fineui.css" /> <link type="text/css" rel="stylesheet" href
="fineui.css" /> </head> <body> </body> </html>
Step 2 : Create a new one in the same directory fineui.css file :
@keyframes slideLeftIn { 0% { opacity: 0; } 100% { opacity: 1; } }

Step 3 : stay IE11 Open the above page in ,F12 Call up the debug window ,IE Collapse immediately ! To argue against



solve the problem

No !


no way out ,IE11 Own BUG, Unless you don't IE11, Or around .


There are several simple ways around :

* CSS Do not include in file @keyframes keyword ( It's impossible , Especially hope IE11 Lower support CSS3 Animated )
* Do not refer to the same in the page CSS Document twice ( No one will quote twice if it's right , and IFrame It's inevitable !)
* Main page and IFrame Same reference in CSS file , to CSS File with random suffix ( Affect browser cache , Formal environment not recommended )

ok , If you really need @keyframes and iframe When two elements , There's no way to avoid this . 



because Windows Operating system and IE Many versions of , The version I use here :

1. Windows 10 Home Edition

2. IE11 The version is as follows :


If you use what we offer 《 Three steps to kill you IE11, When browser is open ,F12 Direct collapse
<>》 enclosure , Can be reproduced locally , Please comment and provide the following information :

1. Windows edition

2. IE11 edition