To quote the BlessCSS project:
Because after all these years, IE still sucks.
At work I’m part of an Innovations team. We’re supposed to be looking forward to the bleeding edge of our products and where we want to go with technology and process. To me, this is what I love about software engineering, tackling broad issues with innovative solutions. We’ve worked on mobile solutions, wearable ideas, and have defined how the UI project for the application will be setup for future versions. Overall, it’s very interesting and satisfying work.
However, we’ve been pulled into writing production code. While this in of itself isn’t horrible we’ve been tasked with working on solving UI and UX issues with a product which uses the most asinine presentation layer. Instead of using a common technology like PHP or classic ASP, when this product was written the developers chose to implement their own engine in C++ to operate essentially like PHP or classic ASP.
To compound matters the entire UI is written with a large number of templates which are held together by IFRAME elements. This means that when the UI presents a workspace to the user the page is actually comprised of outer HTML which contains the navigation and an IFRAME which contains the inner area where the user interacts with the application. When navigating the IFRAME updates its src to the new page. Of course, this breaks back button functionality (which has to be fixed via JavaScript)! The inner frame often has its own IFRAME. Again, sub navigation, located on the left side of the page changes an IFRAME’s src to the page that the user actually works with.
The Innovations team, since it is composed by some of the most critical thinking minds in engineering, was called in to help the product team with the simple task of applying styles. The product since was written over such a lengthy period of time and couple with an old version of ExtJS has proven to be a taxing project to the most seasoned web developers on our team.
The innovation team took Bootstrap, AngularJS, FontAwesome, along other components and built our own set of combined CSS and JavaScript to be included in all products. After these were added to the legacy product we could quickly see that it was never really coded to any HTML standard. The next weeks have been spent trying to fix all the weird areas of ExtJS and odd choices in layout.
So how do you crash IE11? I don’t know. I can do it though. Simply navigate to this one page and click a toolbar button to navigate through a wizard and you’ll eventually crash the page. On this page there are three IFRAME elements. The inner most being the one that has the navigation elements which when used change the frame’s source.
The QA team found this issue and since the big changes to the product were with the UI elements the product team decided to remove all of our CSS. This caused the issue to not occur. This prompted them to declare that our CSS was causing the browser to crash. To us this was absolute nonsense. However, we tried looking into all the ways CSS could crash IE11. The only thing we could see was that the number of selectors could be causing an issue. We found the BlessCSS project.
All of our CSS files did not have the number of selectors to require to splitting up files. I tried taking all the CSS files combining them and then running bless on them. This split the file into two files. This still didn’t resolve the issue.
At this point we were really scratching our heads. How could CSS cause the browser to give up the ghost?! Finally I decided to take the URL from the innermost IFRAME. I opened a new tab so that the auth cookies would be available. The page loaded and the nav worked. How in the hell?!
It appears to me that since each IFRAME’s page would be loading CSS. The templated system they’ve created appears to load the files for each page in the chain. Even though they’re from the same location it appears that the combination is causing IE11 to barf.
Does anyone, anyone know how to prevent this?! Changing the structure of the IFRAME’s isn’t possible. There just has to be a way to mitigate this crap. Ugh, I hate legacy code. Especially when management doesn’t ever seem to think that it needs to be revisited.
FML
