CKEditor

HTML

<script src="http://ckeditor.com/apps/ckeditor/4.3/ckeditor.js"></script>
<script>
    CKEDITOR.disableAutoInline = true;
</script>

<p>
    This fiddle demonstrates a <b>Chrome only</b> issue with the CKEditor 4.3 <a href="http://docs.ckeditor.com/#!/guide/dev_inline">inline editor</a> where the editor fails to initialize properly if the container element is initially hidden. Click the "Toggle panel" button below to show a panel that contains a ckeditor instance:
</p>
<button id="toggle" type="button">Toggle panel</button>

<div id="panel">
     <h3>Panel</h3>
    <p>This panel contains an inline ckeditor instance (below).</p>
    <div id="editor1" contenteditable="true">
        <b>Inline Editing in Action!</b>
        <p>Ideally, this should be editable - and it is! Except in Chrome... :-(.</p>
        <p>You will notice that:
            <ul>
                <li>The CKEditor toolbar shows up if you click in here, but all the buttons are grayed out.</li>
                <li>The <code>contenteditable</code> attribute on the div got set to "false", even though it was initially "true".
                    <ul>
                        <li>Forcing the <code>contenteditable</code> attribute to true using jQuery when showing the panel does not help. It does change the behavior somewhat - it enables the clipboard buttons in the toolbar, and those appear to be functional, but the rest of the buttons are still disabled, and you still can't type inside the editor.</li>
                    </ul>
                </li>
            </ul>
        </p>
    </div>
</div>

CSS

#panel {
    border: 1px solid #ccc;
    margin-top: 1em;
    padding: 1em;
    display: none;
}
#editor1 {
    border: 1px solid #ddd;
    margin-top: 1em;
}

JavaScript

$(document).ready(function() {
    CKEDITOR.inline( 'editor1' );
});

$('#toggle').click(function () {
    $('#panel').toggle();

    // Nice try, but no cookie :-(
    //$('#editor1').attr('contenteditable', 'true');
});