Opened 5 years ago

Closed 3 years ago

#11616 closed Bug (fixed)

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

Reported by: sigurdhj Owned by: Szymon Cofalik
Priority: Normal Milestone: CKEditor 4.5.2
Component: General Version: 3.6.3
Keywords: Blink Webkit Support Cc:

Description

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.

Attachments (2)

11616.html (1.6 KB) - added by Jakub Ś 5 years ago.
test.html (1.5 KB) - added by Jakub Ś 4 years ago.

Download all attachments as: .zip

Change History (17)

comment:1 Changed 5 years ago by Jakub Ś

Keywords: Blink Webkit added
Status: newconfirmed
Version: 4.3.33.6.3

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

Changed 5 years ago by Jakub Ś

Attachment: 11616.html added

comment:2 Changed 4 years ago by Jakub Ś

#12913 was marked as duplicate.

Comment from that ticket (a little bit modified):

  1. Place attached test.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
Last edited 4 years ago by Jakub Ś (previous) (diff)

Changed 4 years ago by Jakub Ś

Attachment: test.html added

comment:3 Changed 3 years ago by Jakub Ś

#13348 was marked as duplicate.

comment:4 Changed 3 years ago by 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.

comment:5 Changed 3 years ago by 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.

comment:6 Changed 3 years ago by Jakub Ś

Keywords: Support added

This issue has also been reported on support channel.

comment:7 Changed 3 years ago by Piotrek Koszuliński

Milestone: CKEditor 4.5.1

Let's give it a try in 4.5.1.

comment:8 Changed 3 years ago by Szymon Cofalik

Owner: set to Szymon Cofalik
Status: confirmedassigned

comment:9 Changed 3 years ago by Szymon Cofalik

Status: assignedreview

@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.

comment:10 Changed 3 years ago by 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.

comment:11 Changed 3 years ago by Piotrek Koszuliński

Status: reviewreview_failed

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.

comment:12 Changed 3 years ago by 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.

comment:13 Changed 3 years ago by Szymon Cofalik

Status: review_failedassigned

comment:14 Changed 3 years ago by Szymon Cofalik

Status: assignedreview

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

comment:15 Changed 3 years ago by Piotrek Koszuliński

Resolution: fixed
Status: reviewclosed

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.

Note: See TracTickets for help on using tickets.
© 2003 – 2017 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy