Challenge:
In our web application, we do provide HTML/CSS/JS editing functionality. We wanted to provide Syntax Highlighting feature for that, and after doing bit of our research we finalized to use:
Code Mirror — http://codemirror.net/Â It’s just awesome!
We implemented and incorporated it with our application, and it was working fine, with FF, Chrome. But but here comes IE — (I know we all face lot of challenges with IE), it was causing following issues:
- Scroll bar flickering
- When we type anything it moves it’s position
What, you are also facing the same problem? Our solution might work with you as well
Solution:
After Investing a lot of time, we found that our page’s DOCTYPE was enforcing our page to run in Quirks mode, and CodeMirror and Quirks mode — are enemies! 🙂
See following excerpt from [Supported browsers section] : http://codemirror.net/
The following desktop browsers are able to run CodeMirror:
- Firefox 3 or higher
- Chrome, any version
- Safari 5.2 or higher
- Opera 9 or higher (with some key-handling problems on OS X)
- Internet Explorer 8 or higher
- Internet Explorer 7 (standards mode) is usable, but buggy. It has a z-index bug that prevents CodeMirror from working properly.
Note that CodeMirror is only supported in standards mode. So not quirks mode, but also not the quasi-standards mode that IE gives you when you specify a transitional doctype. Simply using the HTML5-style
<!--doctype html>is recommended.
Now, the solution is simple, just change DOCTYPE to standards mode and you are done! But “life is not as easy as it seems to be” 🙂
Because if your application’s UI has been designed as per quirks mode than you can’t change it directly, Because it might make your CodeMirror working. But can break N number of things!
Don’t worry, we got a solution for you!
In our case our CodeMirror editor was in an I-Frame and using this trick, we resolved it! — http://stackoverflow.com/questions/5391495/can-i-have-doctype-in-iframe-different-from-hosting-page
Basically, change the DOCTYPE of your I-Framed page, and you are done!
Happy Coding! 🙂