The Bug that Blocked the Browser
Anton Kovalyov
694

Unblocking the browser

A proposed fix for Medium’s Editor in IE11

It all started with this tweet to @Medium and @MediumEng:

Shortly thereafter I found myself reading through the Medium Engineering posts looking for info on upcoming releases. Eventually though, I found a problem to solve. Anton Kovalyov lays out the IE11 bug in “The Bug that Blocked the Browser”.

Image courtesy of Anton Kovalyov

What happens in IE11 when a `contenteditable` section is selected resize controls appear around the element selected. I decided I would set some time aside to solve the problem at hand.

It began with CSS…

My first assumption was the resize property (this in my mind would be the quickest most simple solution). Unfortunately, a quick stop at caniuse.com tells us that Internet Explorer has never supported resize. Interestingly enough Chrome, Firefox and Safari all support it on the desktop but Chrome for Mobile and iOS Safari do not support it at all. Also note that Modern.IE doesn’t list resize at all on their development track.

I turned to Javascript…

and actually found what I thought was an elegant solution. I turned up a resolved bug in IE11 through a search of StackOverflow. Essentially Microsoft has exposed a document event called controlselect, a simple event.preventDefault(); on the event and the controllers never render. However, this had one down side, the clickable area for contenteditable fields became really small and misplaced. Here is a CodePen to see it in action.

Broken clickable area

However…

The problem got interesting when I removed all of Medium’s CSS. All of the sudden IE11 started working like every other supported browser (here is a CodePen without CSS or Javascript). So, I began hunting through Medium’s base CSS file.

Medium’s compressed CSS file.

It ended with Markup…

What I found was a pretty innocuous ruleset that sets a width and an auto margin. It’s where it was applied that matters most.

Main editor pane markup.

The solution is obvious once you know how the browser reacts.

You see, IE11 applies resize controls to any element with a set width or height within a contenteditable element. So, the fix is simple: Apply layoutSingleColumn only to the outermost element that is not contenteditable. I chose notesSource for my solution and it appears to work flawlessly in IE11. All elements that are a child of notesSource are block level so they will respect the width accordingly.

I feel that this solution is the most elegant because it results in a net loss of code (albeit only 18 characters) and allows IE11 to work without modifying the current functioning browsers.

I don’t expect to have solved every issue related to IE11 and the Medium editor within this post, for instance wide-set images will need adjusting (that could be solved with a combination of CSS (calc perhaps) & the JS solution mentioned above.), I do feel confident in that I have solved the largest issue at hand, which is the resize controls appearing on selected elements.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.