Bug #82780

RTE CKeditor top-positioning for maximize and combopanels is broken in browsers with webkit

Added by Arne Bracht Bracht about 2 years ago. Updated about 1 year ago.

Status:
Closed
Priority:
Won't have this time
Assignee:
-
Category:
RTE (rtehtmlarea + ckeditor)
Target version:
-
Start date:
2017-10-17
Due date:
% Done:

100%

TYPO3 Version:
8
PHP Version:
7.1
Tags:
Complexity:
Is Regression:
Sprint Focus:

Description

Fullscreen mode works not correct after scrolling down an then press the button to maximize. It calculate the css class "cke_maximized" to negativ values for "top".

Affected is Chrome version Version 61.0.3163.100 (Offizieller Build) (32-Bit), tried also 64 bit with the same result.
Firefox is everything ok.

The problem is in \typo3\sysext\rte_ckeditor\Resources\Public\JavaScript\Contrib\ckeditor.js

It calculate the css class "cke_maximized" to negativ values for "top".

Test sets cke_maximized {top: 0px;}, but right click menus are now on false positions:

- y.addClass("cke_maximized");f();w=y.getDocumentPosition();y.setStyles({left:-1*w.x+"px",top:-1*w.y+"px"});
+ y.addClass("cke_maximized");f();w=y.getDocumentPosition();y.setStyles({left:-1*w.x+"px",top:"0px"});

Shows what i mean:
https://typo3.slack.com/files/U5STQ9VN2/F7HSA10U8/f__rderschule_landau__typo3_cms_8.7.8__-_google_chrome_15.10.2017_15_13_41.mp4

ckeditor-maximized-chrome.png View (45.1 KB) Wittkiel Gruppe, 2017-10-18 12:01

ckeditor-maximized-firefox.png View (58.4 KB) Wittkiel Gruppe, 2017-10-18 12:01

ckeditor-panel.png View (58 KB) Wittkiel Gruppe, 2017-10-18 12:01


Related issues

Related to TYPO3 Core - Bug #82841: page scroll up when click on drop down button of ckeditor Closed 2017-10-23
Related to TYPO3 Core - Bug #80116: rte_ckeditor displaces dropdown overlays and jumps to top of page on crome/safari Closed 2017-03-03
Duplicated by TYPO3 Core - Bug #83332: CKEditor: Browser jumps to top when selecting a style in TYPO3 8.7.9 Closed 2017-12-14

Associated revisions

Revision 480161c8 (diff)
Added by Benjamin Franzke almost 2 years ago

[BUGFIX] Fix RTE CKEditor placements of dropdowns in Chrome

When used with the Chrome browser, the RTE CKEditor misplaces the
position of its dropdowns/context menus (opened via right-click)
when the viewport is scrolled. CKEditor calculates the offset relative
to the <body> and assumes <body> is as long as the content and that
the scrollbar is placed on <html> (both browser defaults).
As the TYPO3 backend uses 'overflow:auto' on <body> and 'overflow: hidden'
on <html> these assumptions conflict: Once the calculated offset exceeds
the <body> height (due tue scrolling) the chrome browser scrols up.

We now move the vertical scollbar into .module-body which implicitly
fixes the CKEditor offset calculation: The calculated menu offsets are
now relative to <body> (as assumed by CKEditor) and the scroll issues
disappear as we removed the scroll bar from <body>.

Resolves: #80116
Resolves: #82780
Releases: master, 8.7
Change-Id: I0481d4aaac1068577c9bad39e607486533ad4b6c
Reviewed-on: https://review.typo3.org/55647
Tested-by: TYPO3com <>
Reviewed-by: Mathias Schreiber <>
Tested-by: Mathias Schreiber <>
Reviewed-by: Anja Leichsenring <>
Tested-by: Anja Leichsenring <>
Tested-by: Riccardo De Contardi <>
Reviewed-by: Benjamin Kott <>
Tested-by: Benjamin Kott <>

Revision 2b4c842e (diff)
Added by Benjamin Franzke almost 2 years ago

[BUGFIX] Fix RTE CKEditor placements of dropdowns in Chrome

When used with the Chrome browser, the RTE CKEditor misplaces the
position of its dropdowns/context menus (opened via right-click)
when the viewport is scrolled. CKEditor calculates the offset relative
to the <body> and assumes <body> is as long as the content and that
the scrollbar is placed on <html> (both browser defaults).
As the TYPO3 backend uses 'overflow:auto' on <body> and 'overflow: hidden'
on <html> these assumptions conflict: Once the calculated offset exceeds
the <body> height (due tue scrolling) the chrome browser scrols up.

We now move the vertical scollbar into .module-body which implicitly
fixes the CKEditor offset calculation: The calculated menu offsets are
now relative to <body> (as assumed by CKEditor) and the scroll issues
disappear as we removed the scroll bar from <body>.

Resolves: #80116
Resolves: #82780
Releases: master, 8.7
Change-Id: I0481d4aaac1068577c9bad39e607486533ad4b6c
Reviewed-on: https://review.typo3.org/55657
Tested-by: TYPO3com <>
Reviewed-by: Benjamin Kott <>
Tested-by: Benjamin Kott <>

History

#1 Updated by Wittkiel Gruppe about 2 years ago

Same problems for us with:
TYPO3 8.7.8
Chrome 62.0.3202.62 AND Opera 48.0.2685.39
Windows 10

After pressing the button "Maximize" top position is incorrect in Chrome and Opera (webkit):

In Firefox the top position is correct:

Also in Chrome and Opera the positioning of combopanel is wrong:

Seems to be an error in function "getDocumentPosition" in typo3/sysext/rte_ckeditor/Resources/Public/JavaScript/Contrib/ckeditor.js.

#2 Updated by Wouter Wolters about 2 years ago

  • Status changed from New to On Hold
  • Priority changed from Should have to Won't have this time
  • Target version deleted (next-patchlevel)

TYPO3 can not change this file, as CKeditor is a 3rd party extension TYPO3 uses.

#3 Updated by Riccardo De Contardi about 2 years ago

  • Related to Bug #82841: page scroll up when click on drop down button of ckeditor added

#4 Updated by Susanne Moog about 2 years ago

  • Status changed from On Hold to Rejected

Please report your issue at the ckeditor project at https://dev.ckeditor.com/wiki/Bugs as the error is in their code.

#5 Updated by Wittkiel Gruppe about 2 years ago

The solution in #80116 (comment Nr. 7) works for us in Chrome 62. Seems to be a problem with these lines:

//
// Prevent Browser Rebounce
//
html {
    height: 100%;
    overflow: hidden;
}

body {
    height: 100%;
    overflow: auto;
}

https://github.com/TYPO3/TYPO3.CMS/blob/TYPO3_8-7/Build/Resources/Public/Sass/scaffold/_scaffold.scss#L35-L46

This temporary override (TBE_STYLES) fixed the problem in Chrome:


html {
    overflow: auto;
}

body {
    height: auto;
    min-height: 100%;
    overflow: visible;
}

#6 Updated by Arne Bracht Bracht about 2 years ago

Thanks, worked for me. So it seems not to be from the ckeditor project.

#7 Updated by Arne Bracht Bracht about 2 years ago

  • Related to Bug #80116: rte_ckeditor displaces dropdown overlays and jumps to top of page on crome/safari added

#8 Updated by Gerrit Code Review about 2 years ago

  • Status changed from Rejected to Under Review

Patch set 1 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/54620

#9 Updated by Gerrit Code Review about 2 years ago

Patch set 2 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/54620

#10 Updated by Gerrit Code Review about 2 years ago

Patch set 3 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/54620

#11 Updated by Gerrit Code Review about 2 years ago

Patch set 4 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/54620

#12 Updated by Gerrit Code Review about 2 years ago

Patch set 1 for branch TYPO3_8-7 of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/54648

#13 Updated by Gerrit Code Review about 2 years ago

Patch set 2 for branch TYPO3_8-7 of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/54648

#14 Updated by Gerrit Code Review about 2 years ago

Patch set 5 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/54620

#15 Updated by Robert Wildling about 2 years ago

The iPad/iPhones seem to be problematic (googled for "ipad overflow auto problem"...).
I do not have an ipad, but can someone try this, please:

/*
 * Make CKEditor work on iPad, too.
 * overflow:auto seems to work differently on Safari and Mobile Safari.
 * 
 * [1] Add a special webkit rule for touch interaction
 * [2] Use "scroll" instead of "auto".
 */ 
html {
    -webkit-overflow-scrolling:touch; /*[1]*/
    overflow: scroll;  /*[2]*/
}

#16 Updated by Gerrit Code Review about 2 years ago

Patch set 3 for branch TYPO3_8-7 of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/54648

#17 Updated by Gerrit Code Review about 2 years ago

Patch set 6 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/54620

#18 Updated by Georg Ringer almost 2 years ago

  • Duplicated by Bug #83332: CKEditor: Browser jumps to top when selecting a style in TYPO3 8.7.9 added

#19 Updated by Gerrit Code Review almost 2 years ago

Patch set 7 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/54620

#20 Updated by Gerrit Code Review almost 2 years ago

Patch set 8 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/54620

#21 Updated by Gerrit Code Review almost 2 years ago

Patch set 9 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/54620

#22 Updated by Gerrit Code Review almost 2 years ago

Patch set 10 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/54620

#23 Updated by Gerrit Code Review almost 2 years ago

Patch set 11 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/54620

#24 Updated by Gerrit Code Review almost 2 years ago

Patch set 1 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/55647

#25 Updated by Gerrit Code Review almost 2 years ago

Patch set 2 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/55647

#26 Updated by Gerrit Code Review almost 2 years ago

Patch set 3 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/55647

#27 Updated by Gerrit Code Review almost 2 years ago

Patch set 4 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/55647

#28 Updated by Gerrit Code Review almost 2 years ago

Patch set 5 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/55647

#29 Updated by Gerrit Code Review almost 2 years ago

Patch set 6 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/55647

#30 Updated by Gerrit Code Review almost 2 years ago

Patch set 7 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/55647

#31 Updated by Gerrit Code Review almost 2 years ago

Patch set 8 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/55647

#32 Updated by Gerrit Code Review almost 2 years ago

Patch set 1 for branch TYPO3_8-7 of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/55657

#33 Updated by Benjamin Franzke almost 2 years ago

  • Status changed from Under Review to Resolved
  • % Done changed from 0 to 100

#34 Updated by Benni Mack about 1 year ago

  • Status changed from Resolved to Closed

Also available in: Atom PDF