[IE11] The page will scroll down when enter key is hit in CKEditor

[Eleanor]

Reproduce: When the page height is set to 100%, and the page compatMode is backmode, the page will scroll down when enter key is hit in CKEditor.

Analysize: When enter key is hit, the editor invokes function CKEDITOR.dom.element.prototype.scrollIntoParent to make sure current cursor is not out of screen.

This function try to compare the cursor bottom with the browser height. To get cursor bottom, Editor needs to call native API getBoundingClientRect. And then it will call this API again to get documentElement location and combine them tegother to get the real botton if the compatMode is not backmode.

We check the documentation(​https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect), the getBoundingClientRect already returns the postion based on viewport. By default the viewport is client browser, this means we donot need the second call for documentElement no matter the page is backmode or not. Once we remove the secode call, the page works fine. We have verified the change in IE(8-11), Firefox(29.0), Chrome(35.0.1916.153) and Safari(7.0.3).

Please kindly check this issue. Hope this analysize is helpful.

[Piotrek Koszuliński]

Hi, thanks for a thorough analysis. We'll definitely check this. You can also send us a pull request on ​http://github.com/ckeditor/ckeditor-dev to speed up the process.

However, first we need some additional information:

page compatMode is backmode

do you mean compatibility mode in IE? Which IE is it and how do you change mode to compat mode? Note that using dev tools for that is not recommended because they are broken and this mode differs from real compat mode.

[Eleanor]

Replying to Reinmar:

Hi, thanks for a thorough analysis. We'll definitely check this. You can also send us a pull request on ​http://github.com/ckeditor/ckeditor-dev to speed up the process.

However, first we need some additional information:

page compatMode is backmode

do you mean compatibility mode in IE? Which IE is it and how do you change mode to compat mode? Note that using dev tools for that is not recommended because they are broken and this mode differs from real compat mode.

Hi Reinmar:

It's glad to hear you pay attention on this problem. Thanks for your quick response.

The compatMode we are talking about is document.compatMode. It's not IE compatiblity mode in IE developer tool. Please check ​https://developer.mozilla.org/en-US/docs/Web/API/document.compatMode for more information.

We could use DOCType to specific the desired compatMode of current web page. As our application is pretty old, some pages contain the DOCType and some pages do not. It means some pages are BackCompat, but the other pages are CSS1Compat modes. I know this is very ugly, but it's not easy for us to make them consistent.

The issue we had is: some pages are set to CSS1Compat mode and their html height are set to 100%. When we hit enter key in editor in those pages, the whole page will be scrolled down. Please check the attachment.

We really need CKEditor supports both BackCompat and CSS1Compat.

Thanks, Ricky

[Jakub Ś]

Ok, by BackCompat you mean quirks mode.

I have tried reproducing this issue in all browsers and have only managed to do it in IE11. Once enter key reached bottom of editor visible content area the page started to scroll up on each enter key press.

1. Have you tried reproducing this issue in standalone, default CKEditor (e.g. full package) without any customizations, third-party plugins or third-party scripts?
2. In which browsers you get this problem?
3. Could you perhaps send us screen-cast of this issue?

[Piotrek Koszuliński]

Ok, by BackCompat you mean quirks mode.

I don't think that EleanorCui means IE's quirks mode (if that's what you meant :D?). There's a variety of modes including FF's almost std mode (to which now also IE11 defaults when there's no doctype).

But I agree that to make all this clear we need information about browsers and a screencast.

[Eleanor]

Replying to Reinmar:

Ok, by BackCompat you mean quirks mode.

I don't think that EleanorCui means IE's quirks mode (if that's what you meant :D?). There's a variety of modes including FF's almost std mode (to which now also IE11 defaults when there's no doctype).

But I agree that to make all this clear we need information about browsers and a screencast.

Hi Reinmar,

You are right. The BackCompat we are talking about is quirks mode. It exists in both IE and FF. It's not specified as IE's quirks mode.

The issue here is: some pages are quirks mode and their html height are set to 100%. When we hit enter key in editor in those pages, the whole page will be scrolled down. It happens in IE11, Firefox(29.0), Chrome(35.0.1916.153) and Safari(7.0.3). Sorry about my previous mistake. The issue happens in quirks mode.

We only loaded work-count plugin ​http://ckeditor.com/addon/wordcount. We unload this plugin, the issue still happened. Even in standalone, default CKEditor, we still have this problem.

Attachment are capture of demo test page. We could use this demo page to reproduce in Chrome, FF, Safari and IE11.

Thanks

[Jakub Ś]

I have noticed that you are testing CKEditor with "​file://". You should rather test CKEditor on server and call it with HTTP (same way as it will be used in production).

I have checked both settings and got this issue only in IE11 but...

You are using HTML4 doctype. CKEditor uses by default HTML5 doctype. If you wish to use HTML4 doctype, you need to specify this in CKEditor docType config option. Both page and CKEditor doctype must match.
I have checked both matching doctypes, and issue is now gone even in IE11 so I can’t reproduce this problem in any browser thus I’m closing this issue as invalid. @ EleanorCui if you have any other sample page that allows reproducing this problem in fresh CKEditor please attach it and I will consider reopening this issue.