Project

General

Profile

Actions

Bug #82780

closed

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

Added by Arne Bracht about 7 years ago. Updated about 6 years 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%

Estimated time:
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


Files

ckeditor-maximized-chrome.png (45.1 KB) ckeditor-maximized-chrome.png Wittkiel Gruppe, 2017-10-18 12:01
ckeditor-maximized-firefox.png (58.4 KB) ckeditor-maximized-firefox.png Wittkiel Gruppe, 2017-10-18 12:01
ckeditor-panel.png (58 KB) ckeditor-panel.png Wittkiel Gruppe, 2017-10-18 12:01

Related issues 4 (0 open4 closed)

Related to TYPO3 Core - Bug #82841: page scroll up when click on drop down button of ckeditorClosed2017-10-23

Actions
Related to TYPO3 Core - Bug #80116: rte_ckeditor displaces dropdown overlays and jumps to top of page on crome/safariClosedBenni Mack2017-03-03

Actions
Related to TYPO3 Core - Bug #97144: Slow module scrolling in Google Chrome on LinuxClosedBenjamin Franzke2022-03-08

Actions
Has duplicate TYPO3 Core - Bug #83332: CKEditor: Browser jumps to top when selecting a style in TYPO3 8.7.9Closed2017-12-14

Actions

Updated by Wittkiel Gruppe about 7 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.

Actions #2

Updated by Wouter Wolters about 7 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.

Actions #3

Updated by Riccardo De Contardi about 7 years ago

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

Updated by Susanne Moog about 7 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.

Actions #5

Updated by Wittkiel Gruppe about 7 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;
}

Actions #6

Updated by Arne Bracht about 7 years ago

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

Actions #7

Updated by Arne Bracht about 7 years ago

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

Updated by Gerrit Code Review about 7 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

Actions #9

Updated by Gerrit Code Review about 7 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

Actions #10

Updated by Gerrit Code Review about 7 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

Actions #11

Updated by Gerrit Code Review about 7 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

Actions #12

Updated by Gerrit Code Review about 7 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

Actions #13

Updated by Gerrit Code Review about 7 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

Actions #14

Updated by Gerrit Code Review about 7 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

Actions #15

Updated by Gone With the Wind almost 7 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]*/
}
Actions #16

Updated by Gerrit Code Review almost 7 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

Actions #17

Updated by Gerrit Code Review almost 7 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

Actions #18

Updated by Georg Ringer almost 7 years ago

  • Has duplicate Bug #83332: CKEditor: Browser jumps to top when selecting a style in TYPO3 8.7.9 added
Actions #19

Updated by Gerrit Code Review almost 7 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

Actions #20

Updated by Gerrit Code Review almost 7 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

Actions #21

Updated by Gerrit Code Review almost 7 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

Actions #22

Updated by Gerrit Code Review almost 7 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

Actions #23

Updated by Gerrit Code Review almost 7 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

Actions #24

Updated by Gerrit Code Review almost 7 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

Actions #25

Updated by Gerrit Code Review almost 7 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

Actions #26

Updated by Gerrit Code Review almost 7 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

Actions #27

Updated by Gerrit Code Review almost 7 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

Actions #28

Updated by Gerrit Code Review almost 7 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

Actions #29

Updated by Gerrit Code Review almost 7 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

Actions #30

Updated by Gerrit Code Review almost 7 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

Actions #31

Updated by Gerrit Code Review almost 7 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

Actions #32

Updated by Gerrit Code Review almost 7 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

Actions #33

Updated by Benjamin Franzke almost 7 years ago

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

Updated by Benni Mack about 6 years ago

  • Status changed from Resolved to Closed
Actions #35

Updated by Benjamin Franzke over 2 years ago

  • Related to Bug #97144: Slow module scrolling in Google Chrome on Linux added
Actions

Also available in: Atom PDF