Opened 4 years ago

Closed 4 years ago

Last modified 3 years ago

#13285 closed Bug (expired)

Focus makes editor scroll to top on Firefox 38

Reported by: anrikun Owned by:
Priority: Normal Milestone:
Component: Core : Editable Version:
Keywords: Cc: danny.smit.0@…

Description

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' ]();

Attachments (4)

ckeditest.html (1021 bytes) - added by Danny Smit 3 years ago.
mystyles.css (28 bytes) - added by Danny Smit 3 years ago.
body100.png (247.7 KB) - added by Jakub Ś 3 years ago.
bodyNot100.png (229.6 KB) - added by Jakub Ś 3 years ago.

Download all attachments as: .zip

Change History (14)

comment:1 Changed 4 years ago by Piotrek Koszuliński

Status: newpending
Version: 4.4.7

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?

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

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

comment:4 Changed 4 years ago by Piotrek Koszuliński

Resolution: expired
Status: pendingclosed

comment:5 Changed 4 years ago by Matthew Popat

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

comment:6 Changed 3 years ago by Danny Smit

Cc: danny.smit.0@… added

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

Changed 3 years ago by Danny Smit

Attachment: ckeditest.html added

Changed 3 years ago by Danny Smit

Attachment: mystyles.css added

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

Changed 3 years ago by Jakub Ś

Attachment: body100.png added

Changed 3 years ago by Jakub Ś

Attachment: bodyNot100.png added

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

Last edited 3 years ago by Jakub Ś (previous) (diff)

comment:10 Changed 3 years ago by Danny Smit

Thanks, that seems to work for my scenario.

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