Preface

A lot of people know we're doing itFineUI Control library <http://fineui.com/>, And we've done more than 9
Time of year, In countless interactions with browsers, It also found that multiple browsersBUG, And make it public for your reference:

* shareIE7 A magicalBUG( It's not about closed labels, It is indeed.IE7 OfBUG)
<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) Burst againBUG! <http://www.cnblogs.com/sanshi/p/6138767.html>

Such kindBUG 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 itIDE, Browser these development tools.

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

 

Today's public oneIE11 OfCrash BUG And depressed me for a long time, I finally got it today, Ha ha ha ha......

 

discover problems

FineUI( professional edition) Actually in2016 year3 month <http://fineui.com/version_pro/>
On the desktop, Tablet and mobile browser are adapted, And add animation effect to mobile browser(iOS LowerWebkit andAndriod LowerChrome), But thisCSS3 Animation is limited to
WebKit Browser, Does not supportFirefox,Edge,IE11 Other browsers.


Recently in version update, I want to putCSS3 Animation effect extended to desktop versionFirefox,Edge andIE11 Other browsers, In the development process, Suddenly one day, I findIE11 Just open the debugging tool(F12), The browser crashed, Prove effective every time:



IE11 No problem opening the page below, But as long asF12 Open debugging tool, Browser nowCrash, 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:



 

Analysis problem

Fortunately,, Last version ofFineUI( 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 Key words 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 usualCrash. 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 nonsenseBUG 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 them f.css It's exactly the same, Not yet. 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, One causeIE11 collapse, And the other won't!

OK, We have to question bothURL 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 oneURL It's too long???

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

Impossible... Forget it... It's not about this place....

.....

.....

.....

No way, Still think of yourself as a fool, I'll take it.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

 

Problem disappeared!!!!!

 

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

 

After a thrill, It's a depression, Because I putURL Lengthened, The same problem disappears:


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

 

Think again

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

 

IFrame This oneCSS In files and parent pagesCSS fileURL Caused by the same( Instead ofURL 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; } }
 

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



 

 

Well said《 Three moves to kill youIE11》

Later discovered, No need for this question iframe Can also reproduce, As long as two conditions are met, Collapse immediately:

* Page load sameCSS File two times
* CSS File contains @keyframes Definition
 

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>):

First step: Build 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>
The second step: Create a new one in the same directory fineui.css file:
@keyframes slideLeftIn { 0% { opacity: 0; } 100% { opacity: 1; } }
 

The third step: stayIE11 Open the above page in,F12 Call up the debug window,IE Collapse immediately! Refuse to accept argument

 

 

Solve the problem

No time!

 

No way out,IE11 SelfBUG, Unless you don'tIE11, Or detour.

 

There are several simple ways around:

* CSS Do not include in file @keyframes Keyword( It's impossible, Especially hopeIE11 Lower supportCSS3 Animated)
* Do not refer to the same in the pageCSS File two times( No one will quote twice if it's right, andIFrame It's inevitable!)
* Main page andIFrame Same reference inCSS file, toCSS 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 andIE Many versions of, The version I use here:

1. Windows 10 Family Edition

2. IE11 The version is as follows:



 

If you use what we offer《 Three steps to kill youIE11, 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