Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

There was a major bug on CodePen where tapping into one of the editors on an iOS device (like an iPad) wouldn’t bring up the keyboard. This made CodePen essentially useless for creating or editing Pens on those devices.

Many many hours of testing and creating reduced test cases (using CodePen itself, of course) we were able to track down the issue. Bizarrely enough, it was caused by the textarea having it’s border removed. For example, if a stylesheet on the page contained:

textarea {
  border: 0;

This would trigger the error.

We fixed the error in the meantime by making sure the textareas that we turned into editors had borders around them.

Our editors are based on CodeMirror. On the CodeMirror site, this problem doesn’t come up. Turns out they just don’t apply the CSS above (as would be common in many reset stylesheets) so the problem doesn’t manifest there. As such, it’s not a “bug” per se, but it’s something that could and should be taken care of the by the script.

So we did what responsible developers should do:

1. We reported the “bug”
2. We talked it out with the creator/maintainer of the project
3. We tried various things and ended up on a solution that worked
4. We submitted a pull request

Assuming it gets merged in, everyone using CodeMirror will benefit from the fix. Yay!

Note there is still a few bugs with our editors lingering. Copy and paste is one. Having to tap away from the HTML one at first to open the keyboard is another. Dragging text crashes desktop Safari is another. Many of these will be cleaned up when we make the transition to CodeMirror 3, which is in the works.