Weird issue when applying certain styles to textarea...

[chiel]

Hi!

So, my CodeMirror was lagging like crazy in Chrome, like I reported earlier, due to unknown reasons. Today I finally had some time to spare and tried to dig into this issue. I am glad to say after a LOT of trial and error I pinpointed the cause.

It's nothing to do with JS, it's in CSS. And it's not even to do with CSS applied to CodeMirror...

Adding the following CSS to the index.html in the root of the project will make the editor go berserk in chrome:

textarea {
    width: 100%;
    padding: 0;
    border: 0;
}

I don't know why, or how... but this just makes CodeMirror lag like crazy, and the cursor won't position properly etc. Of course this is very much a cornercase, but I find it pretty curious nonetheless.

Hope this helps.

Chiel

[marijnh]

I can't really explain why this happens (especially since it only happens when all three CSS rules are present), but setting a width for CodeMirror's hidden textarea (22ee5fb) solves it.

[chiel]

Awesome, thanks a lot!

[michaelficarra]

Maybe the chromium devs would be interested in this issue, no?

[marijnh]

Yeah, but it'd probably be a few hours work to distil a useful demo case out of the CodeMirror codebase (they typically don't want to wade through a huge system to pinpoint a bug). I don't currently have the time to spare.

[chiel]

If it's something in Chromium, I bet they'd be interested. But setting up a test for a bug like this likely takes some time (ensure it's not something in codemirror etc). And even then, it's such a corner-case, for which there is simply not enough time to spare at the moment, I guess.

[michaelficarra]

Well, for when you have a moment to spare: http://code.google.com/p/chromium/issues/entry