(Chrome) Resizing the editor while it's not displayed

[sigurdhj]

Issue

If the editor gets resized while not shown, I can't interact with the textarea when I decide to display the editor again.

Steps to reproduce

1. Open JSFiddle ​http://jsfiddle.net/jtf3f/7/ in Chrome
2. Resize the browser
3. Click 'Toggle editor'-button
4. Try to write anything in the editor

Browser & OS

• Browser: Google Chrome Version 33.0.1750.117 m
• OS: Windows 7 (x64) Enterprise SP 1

The issue is for Chrome only, I'm not experiencing the issue with Firefox and IE.

[Jakub Ś]

I was able to reproduce this problem from CKEditor 3.6.3 rev. [7387] in Blink and Webkit browsers.

[Jakub Ś]

Comment from that ticket (a little bit modified):

1. Place attached html file in samples folder
2. Open the html file in Google Chrome/Opera or Safari
3. Note: There is text in the CKEditor and it is editable
4. Click the "Hide CKEditor" button
5. Resize your browser window
6. Click the "Show CKEditor" button
7. Note: The text is missing from the editor, the editor is not editable (the reason is the CKEditor's iframe has width = 0)
8. Resize your browser window again
9. Note: The text is now visible/editable on the editor again

[Jakub Ś]

#13348 was marked as duplicate.

[dtekk]

This patch addresses a bug within CKEditor in webkit-based browsers causing the editor contents to become invisible when the browser is resized with the editor hidden from view. When the editor appears again, the contents will not be shown until the editor is resized. This is caused by "contentSpace.getSize( 'width' )" returning 0 when the editor is hidden.

Patched for version 4.4.7

Uncompressed CKEditor:

File: /ckeditor/plugins/wysiwygarea/plugin.js

Unpatched code:

if ( CKEDITOR.env.webkit ) {
	// Webkit: iframe size doesn't auto fit well. (#7360)
	var onResize = function() {
		// Hide the iframe to get real size of the holder. (#8941)
		contentSpace.setStyle( 'width', '100%' );

		iframe.hide();
		iframe.setSize( 'width', contentSpace.getSize( 'width' ) );
		contentSpace.removeStyle( 'width' );
		iframe.show();
	};

	iframe.setCustomData( 'onResize', onResize );

	CKEDITOR.document.getWindow().on( 'resize', onResize );
}

Patched code:

if ( CKEDITOR.env.webkit ) {
	// Webkit: iframe size doesn't auto fit well. (#7360)
	var onResize = function() {
		// Hide the iframe to get real size of the holder. (#8941)
		contentSpace.setStyle( 'width', '100%' );

		iframe.hide();
		var x = contentSpace.getSize( 'width' );

		if (x) {
			iframe.setSize( 'width', x );
			contentSpace.removeStyle( 'width' );
		}
		
		iframe.show();
	};

	iframe.setCustomData( 'onResize', onResize );

	CKEDITOR.document.getWindow().on( 'resize', onResize );
}

Compressed CKEditor:

File: /ckeditor/ckeditor.js

Unpatched code:

d.setAttribute("title",f));if(h){var f=CKEDITOR.tools.getNextId(),i=CKEDITOR.dom.element.createFromHtml('<span id="'+f+'" class="cke_voice_label">'+h+"</span>");g.append(i,1);d.setAttribute("aria-describedby",f)}a.on("beforeModeUnload",function(a){a.removeListener();i&&i.remove()});d.setAttributes({tabIndex:a.tabIndex,allowTransparency:"true"});!c&&b();CKEDITOR.env.webkit&&
(c=function(){g.setStyle("width","100%");d.hide();d.setSize("width",g.getSize("width"));g.removeStyle("width");d.show()}

Patched code:

d.setAttribute("title",f));if(h){var f=CKEDITOR.tools.getNextId(),i=CKEDITOR.dom.element.createFromHtml('<span id="'+f+'" class="cke_voice_label">'+h+"</span>");g.append(i,1);d.setAttribute("aria-describedby",f)}a.on("beforeModeUnload",function(a){a.removeListener();i&&i.remove()});d.setAttributes({tabIndex:a.tabIndex,allowTransparency:"true"});!c&&b();CKEDITOR.env.webkit&&
(c=function(){g.setStyle("width","100%");d.hide();var x=g.getSize("width");if (x){d.setSize("width",x);g.removeStyle("width");}d.show()}

Hope this helps anyone with the same problem.

[Jakub Ś]

@dtekk, could I as you to provide this fix as a pull request for CKEditor 4.x? You could provide this fix as a pull request for CKEditor 4.x? You could submit it to ​ckeditor-dev

If you decide to do so, please don't forget to describe exactly what or which bug this pull request fixes. Because tests are required, please also see ​​http://docs.ckeditor.com/#!/guide/dev_contributing_code.

[Jakub Ś]

This issue has also been reported on support channel.

[Piotrek Koszuliński]

Let's give it a try in 4.5.1.

[Szymon Cofalik]

@dtekk - thanks for your contribution.

Code submitted by @dtekk works fine. However I was a bit hesitant to use it - it is still hard to tell what would be the size of the iframe when after showing it (It will have width:100% but that code for webkits was written because width:100% supposedly wasn't correct).

However the code for webkit fixes the bug that is 3 years old. I commented out the whole if:

if ( CKEDITOR.env.webkit ) {
	// Webkit: iframe size doesn't auto fit well. (#7360)
	var onResize = function() {
		// Hide the iframe to get real size of the holder. (#8941)
		contentSpace.setStyle( 'width', '100%' );

		iframe.hide();
		iframe.setSize( 'width', contentSpace.getSize( 'width' ) );
		contentSpace.removeStyle( 'width' );
		iframe.show();
	};

	iframe.setCustomData( 'onResize', onResize );

	CKEDITOR.document.getWindow().on( 'resize', onResize );
}

And can't reproduce the original bug.

So, I think there are two ways we can go now: we either remove whole if and the bug described in this ticket will be gone, but we might have regression if someone, somehow uses old version of webkit ==> ​branch:t/13422

or

I can just apply @dtekk's soultion - which will work fine as well, because even if width will be set to 100% it still works fine on modern browsers ==> ​branch:t/13422b

Both branches have a test for this ticket.

[dtekk]

@j.swiderski, Reinmar & scofalik

Thanks for working so quickly on this, much appreciated!

@j.swiderski

I'll be sure to provide the fix as a pull request for future bugs. Thanks for those resources.

[Piotrek Koszuliński]

OK, I'll go with the ​branch:t/11616 approach. Removing code is always better than adding more code and I'm also unable to reproduce the old bug.

What I miss is a manual TC for #7360. Let's be sure that this really isn't a problem any more. Other than that, remember to change 4.5.1 tag in the existing manual TC to 4.5.2.

[Piotrek Koszuliński]

PS. In #7360 I found links to #9160 and #9160 (both were apparently caused by the fix for $#7360). Would be good to check if they are gone too.

[Szymon Cofalik]

Since tickets you have mentioned are connected with old versions of CKE I just scouted through those tickets and tried to recreate described scenarios. I added some new test cases. ​branch:t/11616

[Piotrek Koszuliński]

Fixed on master with ​git:168ea63.

I removed one of the tests that you created because it was invalid. It was trying to set data synchronously what's incorrect because initialization and setting data is asynchronous.

I'll close also #9160 and #9715 because I could not reproduce them and both mentions that code as the trigger.