preface

A lot of people know we're doing it FineUI Control library <http://fineui.com/>, 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)
<http://www.cnblogs.com/sanshi/archive/2013/03/18/2966456.html>
* Chrome53 The latest version of the magazine is out of order BUG! <http://www.cnblogs.com/sanshi/p/5938198.html>
* Chrome the latest version (53-55) Again BUG! <http://www.cnblogs.com/sanshi/p/6138767.html>

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 <http://fineui.com/version_pro/>
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 :

test1.aspx:
<!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>
 

test2.aspx
<!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="http://www.w3.org/1999/xhtml"> <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 :

res.axd?css=f.css:
Content-Type:text/css; charset=utf-8
f.css:
Content-Type:text/css
 

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 :

/res.axd?css=f.css&t=636364679643916663

Change to :

/res.axd?css=f.css&t=63636467964391666

 

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 :


/res.axd?css=f.css&t=636364679643916663897978783784328467326473624763274632764732

 

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
<http://files.cnblogs.com/files/sanshi/ie11_crash.zip>):

test1.html
<!DOCTYPE html> <html> <head> <title></title> <link type="text/css" rel
="stylesheet" href="fineui.css" /> </head> <body> <iframe src="./test2.html"></
iframe> </body> </html>
test2.html:
<!DOCTYPE html> <html> <head> <title></title> <link type="text/css" rel
="stylesheet" href="fineui.css" /> </head> <body> </body> </html>
fineui.css:
@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
<http://files.cnblogs.com/files/sanshi/ie11_crash.zip>):

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 . 

 

feedback

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
<http://files.cnblogs.com/files/sanshi/ie11_crash.zip>》 enclosure , Can be reproduced locally , Please comment and provide the following information :

1. Windows edition

2. IE11 edition