Bug #80116

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

Added by Benjamin no-lastname-given almost 2 years ago. Updated 2 months ago.

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

100%

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 Closed 2017-10-17
Related to TYPO3 Core - Bug #83379: Dropdown (paragraph f.e.) in RTE(htmlarea) instantly closes after opening Closed 2017-12-18
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 10 months 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 10 months 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 Benjamin no-lastname-given almost 2 years ago

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

#2 Updated by Benjamin no-lastname-given almost 2 years 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 over 1 year ago

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

#4 Updated by Frank Naegler over 1 year ago

confirmed, chrome is ok, safari the issue still exists

#5 Updated by Frank Naegler over 1 year 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 about 1 year 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 about 1 year 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 about 1 year ago

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

#9 Updated by Christian Hackl about 1 year 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 about 1 year ago

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

#11 Updated by Riccardo De Contardi about 1 year 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 about 1 year ago

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

#13 Updated by Francois Suter about 1 year ago

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

#14 Updated by Arne Bracht Bracht about 1 year ago

Works for me, too.

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

#15 Updated by Arne Bracht Bracht about 1 year 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 about 1 year 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 about 1 year 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 about 1 year 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 about 1 year 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 about 1 year 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 about 1 year 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 about 1 year 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 1 year 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 1 year 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 year 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 11 months 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.

#27 Updated by Riccardo De Contardi 11 months ago

  • Related to Bug #83379: Dropdown (paragraph f.e.) in RTE(htmlarea) instantly closes after opening added

#28 Updated by Susanne Moog 11 months ago

  • Target version changed from 9.0 to 9.2

#29 Updated by Gerrit Code Review 10 months 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

#30 Updated by Gerrit Code Review 10 months 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

#31 Updated by Gerrit Code Review 10 months 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

#32 Updated by Gerrit Code Review 10 months 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

#33 Updated by Gerrit Code Review 10 months 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

#34 Updated by Gerrit Code Review 10 months 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

#35 Updated by Gerrit Code Review 10 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/55647

#36 Updated by Gerrit Code Review 10 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/55647

#37 Updated by Gerrit Code Review 10 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/55647

#38 Updated by Gerrit Code Review 10 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/55647

#39 Updated by Gerrit Code Review 10 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/55647

#40 Updated by Gerrit Code Review 10 months 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

#41 Updated by Gerrit Code Review 10 months 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

#42 Updated by Gerrit Code Review 10 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/55657

#43 Updated by Benjamin Franzke 10 months ago

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

#44 Updated by Benni Mack 2 months ago

  • Status changed from Resolved to Closed

Also available in: Atom PDF