Focus makes editor scroll to top on Firefox 38

[anrikun]

Whenever editable.js' focus() is called, editor scrolls to top on Firefox 38. This does not happen on Chrome or IE. What is strange is that I can't reproduce this on the demo.

The line that causes this is line 77:

this.$[ CKEDITOR.env.ie && this.getDocument().equals( CKEDITOR.document ) ? 'setActive' : 'focus' ]();

[Piotrek Koszuliński]

Question is - who and when calls editable.focus()? Do you call it yourself or does the editor call it? Is there any TC that allows to reproduce this issue?

[anrikun]

focus() is called by the editor itself after user has chosen a style to apply. The call is in stylescombo's plugin.js, function onClick:

				onClick: function( value ) {
					editor.focus(); // <= HERE
					editor.fire( 'saveSnapshot' );

					var style = styles[ value ],
						elementPath = editor.elementPath();

					editor[ style.checkActive( elementPath, editor ) ? 'removeStyle' : 'applyStyle' ]( style );
					editor.fire( 'saveSnapshot' );
				},

I will try to find a way to reproduce this issue on a separate platform.

[Jakub Ś]

I have tried reproducing this problem with autogrow, divarea, shared spaces plugin and even inline editor. None resulted in error in default editor.

I'm thinking this is some integration issue but not editor error.

@anrikun please try disabling all CKEditor third-party plugins and third-party scripts. Next start adding them one by one, clearing cache each time. That way you should find out which code (if any) is causing this behaviour inside editor.

NOTE: if you have done any changes to editor core code please also try to test CKEditor without them.

[Matthew Popat]

I have also seen this problem it only seems to occur when your selection is inside a nested editable of a widget.

[Jakub Ś]

@matthew.popat & @DannySmit are you able to provide reduced HTML sample, showing that problem? I have just tried reproducing this issue with nested widgets - no scrolling has occurred.

In order to reopen a bug we need sample HTML file showing the problem.

[Danny Smit]

I'm experiencing an issue that looks similar, but I'm not sure if it is really the same problem. However like the originally reported issue, it only seems to occur in Firefox (version 50.1.0 in my case). I haven't seen it with any other browser.

I have created and attached a small example html and css file. The issue can be reproduced with the following scenario's:

Scenario 1:

• Open the page in firefox and scroll to the bottom of the editor
• Double click the lowest image (the properties window pops up)
• Press either OK or Cancel
• Result: The editor jumps to the top

Scenario 2:

• Open the page in firefox and scroll to the bottom of the editor
• Place the cursor on the last line ("Bon appetit 2")
• Select a style/format for the line (E.g. Italic/Heading 1)
• Result: The editor jumps to the top

What is important to keep in mind is that the example specifies a mystyles.css with: body { height: 100%; } If you remove that little piece of CSS, the observed behavior doesn't occur anymore.

I found this relation with the body height because of this post at stackoverflow: ​http://stackoverflow.com/questions/34110733/ckeditor-jumps-to-top-with-certtain-css

So removing the body height from the CSS of the editor might be a work around for others experiencing similar issues as well.

Hope this helps.

[Jakub Ś]

@DannySmit please have a look at attached images. When you set body to 100% it only takes size of the viewport and not the whole body. You can see this clearly when scrolling down the editor. If on the other hand you disable the height:100%, you will see that body is as high as the content.

If you are worried about one line height body when there is no content in the editor then perhaps you might want to use min-height as mentioned ​here

[Danny Smit]

Thanks, that seems to work for my scenario.