Bug #80116

rte_ckeditor displaces dropdown overlays and jumps to top of page on crome/safari

Added by Benjamin no-lastname-given 11 months ago. Updated 7 days ago.

Status:
Under Review
Priority:
Must have
Assignee:
Category:
RTE (rtehtmlarea + ckeditor)
Target version:
Start date:
2017-03-03
Due date:
% Done:

0%

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

Description


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 #82928: RTE (ckeditor) menus broken in Chrome 61+62 Closed 2017-11-06
Related to TYPO3 Core - Bug #82780: RTE CKeditor top-positioning for maximize and combopanels is broken in browsers with webkit Under Review 2017-10-17
Duplicated by TYPO3 Core - Bug #83332: CKEditor: Browser jumps to top when selecting a style in TYPO3 8.7.9 Closed 2017-12-14

History

#1 Updated by Benjamin no-lastname-given 11 months ago

  • Description updated (diff)
  • Category changed from Backend JavaScript to RTE (rtehtmlarea + ckeditor)

#2 Updated by Benjamin no-lastname-given 10 months ago

  • Assignee set to Benni Mack

Hi Benni,
i have seen you are handling the other CKEditor issues, so i also assign this one to you.

#3 Updated by Riccardo De Contardi 10 months ago

That still affects Safari but not Chrome anymore. Can someone confirm?

#4 Updated by Frank Naegler 10 months ago

confirmed, chrome is ok, safari the issue still exists

#5 Updated by Frank Naegler 10 months ago

  • Target version changed from 8 LTS to 9.0

looks like this is a known bug. try this google search:
https://www.google.de/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=ckeditor+dropdown+jumpx%x%*

I think this should be fixed but is not critical for the upcoming release.

#6 Updated by Riccardo De Contardi 4 months ago

I found this issue again with Chrome (on Mac), both affects 8.7.7 and latest master 9.0.0-dev

#7 Updated by Benjamin Franzke 3 months ago

This is due TYPO3's css setting body height to 100%:
https://github.com/TYPO3/TYPO3.CMS/blob/8.7.8/Build/Resources/Public/Sass/scaffold/_scaffold.scss#L36

This code was introduced in a giant commit https://github.com/TYPO3/TYPO3.CMS/commit/9b7ed3aec253bad5221407834903f4231bb6e2b4 without further clarification what "Browser Rebounce" is supposed to be. It seems that the buggy code is copied from https://stackoverflow.com/a/28985569, as they are talking about a "bounce" effect, which Kay has probably rephrased to "Rebounce".

Don't know, whether it would be accepted to just remove those lines (body height 100% is idiotic), but I think desktop Chrome is far more important than mobile safari, therefore i've fixed it with a t3skin override [1]:

/* TYPO3 uses html {overflow: hidden, height: 100%} body {height: 100%;overflow:auto}
 * to prevent some "Browser Rebounce" – with no further
 * explanation what that is.
 * That "fix" causes a bugs in chrome because:
 *  * ckeditor context/popup menu cause the page to scroll up as body is only
 *    100% in height and those elements are placed absolutly in the <body> tag
 *  * The scrollbar is overlayed by the topbar
 */

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

[1] Put above css into an extension in a file called Resources/Public/Backend/Css/Skin/t3skin_override.css and add to ext_tables.php:

$TBE_STYLES['skins'][$_EXTKEY]['name'] = $_EXTKEY;
$TBE_STYLES['skins'][$_EXTKEY]['stylesheetDirectories']['structure'] = 'EXT:' . $_EXTKEY . '/Resources/Public/Backend/Css/Skin/';

#8 Updated by Riccardo De Contardi 3 months ago

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

#9 Updated by Christian Hackl 3 months ago

@Benjamin Franzke
sry your fix don't work here:

MAC 10.12.6 and Chrome 61.0.3163.100

#10 Updated by Wittkiel Gruppe 3 months ago

The override-fix works for us with Win10 and Chrome 62.

#11 Updated by Riccardo De Contardi 3 months ago

@Christian Hackl (mine is just a wild guess, I have not tested yet and don't know if you have already done that) could you test it again, but removing the browser cache?

#12 Updated by Georg Ringer 2 months ago

  • Related to Bug #82928: RTE (ckeditor) menus broken in Chrome 61+62 added

#13 Updated by Francois Suter 2 months ago

The fix works for me on Mac and Chrome 62 (with TYPO3 8.7.8).

#14 Updated by Arne Bracht Bracht 2 months ago

Works for me, too.

Would be very nice to fix this in the next TYPO3 V8 release.

#15 Updated by Arne Bracht Bracht 2 months ago

  • Related to Bug #82780: RTE CKeditor top-positioning for maximize and combopanels is broken in browsers with webkit added

#16 Updated by Gerrit Code Review 2 months ago

  • Status changed from New 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

#17 Updated by Gerrit Code Review 2 months 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

#18 Updated by Gerrit Code Review 2 months 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

#19 Updated by Gerrit Code Review 2 months 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

#20 Updated by Gerrit Code Review 2 months 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

#21 Updated by Gerrit Code Review 2 months 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

#22 Updated by Gerrit Code Review 2 months 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

#23 Updated by Gerrit Code Review about 2 months 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

#24 Updated by Gerrit Code Review about 2 months 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

#25 Updated by Georg Ringer about 1 month ago

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

#26 Updated by Ernesto Baschny 7 days ago

The bugfix as an extension while we have no core fix available: https://extensions.typo3.org/extension/ckeditor_fix/ - might "break the iPad" experience if that matters to you.

Also available in: Atom PDF