[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 <no-reply@typo3.com> Reviewed-by: Mathias Schreiber <mathias.schreiber@typo3.com> Tested-by: Mathias Schreiber <mathias.schreiber@typo3.com> Reviewed-by: Anja Leichsenring <aleichsenring@ab-softlab.de> Tested-by: Anja Leichsenring <aleichsenring@ab-softlab.de> Tested-by: Riccardo De Contardi <erredeco@gmail.com> Reviewed-by: Benjamin Kott <benjamin.kott@outlook.com> Tested-by: Benjamin Kott <benjamin.kott@outlook.com>
TYPO3 · Feb 10, 2018 · 480161c · 480161c
1 parent b8a6ee1
commit 480161c
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 5 deletions.
diff --git a/Build/Resources/Public/Sass/component/_module.scss b/Build/Resources/Public/Sass/component/_module.scss
@@ -30,7 +30,7 @@ $module-body-padding: $module-body-padding-vertical $module-body-padding-horizon
 // Template
 //
 .module {
-    min-height: 100%;
+    height: 100%;
     width: 100%;
     background-color: $module-bg;
     color: $module-color;
@@ -45,6 +45,7 @@ $module-body-padding: $module-body-padding-vertical $module-body-padding-horizon
 // Loading indicator
 //
 .module-loading-indicator {
+    position: fixed;
     min-height: 5px;
     width: 100%;
     z-index: 999999;
@@ -183,6 +184,10 @@ $module-body-padding: $module-body-padding-vertical $module-body-padding-horizon
 //
 .module-body {
     padding: $module-body-padding;
+    height: 100%;
+    // Use overflow-y: auto to ensure ckeditor dropdowns
+    // do not conflict with height: 100% on <body>
+    overflow-y: auto;
 
     > .callout:first-child {
         margin-top: 0;

diff --git a/typo3/sysext/backend/Resources/Public/Css/backend.css b/typo3/sysext/backend/Resources/Public/Css/backend.css
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/DocumentHeader.js b/typo3/sysext/backend/Resources/Public/JavaScript/DocumentHeader.js
@@ -62,7 +62,7 @@ define(['jquery'], function($) {
    * Scroll
    */
   DocumentHeader.scroll = function() {
-    DocumentHeader.currentPosition = $(window).scrollTop();
+    DocumentHeader.currentPosition = $(this).scrollTop();
     if (DocumentHeader.currentPosition > DocumentHeader.lastPosition) {
       if (DocumentHeader.direction !== 'down') {
         DocumentHeader.direction = 'down';
@@ -89,7 +89,7 @@ define(['jquery'], function($) {
   DocumentHeader.start = function() {
     DocumentHeader.reposition();
     $(window).on('resize', DocumentHeader.reposition);
-    $(window).on('scroll', DocumentHeader.scroll);
+    $('.t3js-module-docheader + .t3js-module-body').on('scroll', DocumentHeader.scroll);
   };
 
   /**

diff --git a/typo3/sysext/install/Resources/Public/Css/install.css b/typo3/sysext/install/Resources/Public/Css/install.css