Opened 7 years ago

Last modified 3 years ago

#10082 review_failed Bug

[Android] Dialog windows open in an incorrect place on a page and cannot be moved

Reported by: Anna Tomanek Owned by: Szymon Kupś
Priority: Nice to have (we want to work on it) Milestone:
Component: UI : Dialogs Version: 4.0
Keywords: Android Cc:

Description (last modified by Anna Tomanek)

Tested on Samsung Galaxy S, Android 4.2.1 (Jelly Bean), CKEditor 4.0.1 samples for the Standard preset, replacebycode and inline samples.

After a toolbar button is clicked, editor dialog windows seem to open in a pre-determined place on the page, outside the editor window, and with a zoomed-in page it they are out of sight for the user. From the user's perspective it looks like something is wrong: the page becomes grayed out, but he/she needs to zoom out to see the dialog window.

It looks like the dialog windows are centered on the page or opened with a pre-determined offset that ignores the zoom level.

What is more, they cannot seem to be moved. Holding the title bar and dragging it does not do anything (it actually scrolls the page). The page below containing the editor is still scrollable. The only thing that seems to change the location of the dialog windows is zooming in and out.

This can also be reproduced in inline mode.

In Firefox 18.0.2 and Chrome 18.0.1025469 the dialog window moves around the page, too, and its location is also affected by whether the virtual keyboard is open or not.

Attachments (8)

Android-4.2.1-stock-dialog1.png (46.9 KB) - added by Anna Tomanek 7 years ago.
Android-4.2.1-stock-dialog2.png (61.0 KB) - added by Anna Tomanek 7 years ago.
Android-4.2.1-stock-dialog1-inline.png (67.3 KB) - added by Anna Tomanek 7 years ago.
Android-4.2.1-stock-dialog2-inline.png (97.6 KB) - added by Anna Tomanek 7 years ago.
Android-4.2.1-firefox-dialog1.png (87.9 KB) - added by Anna Tomanek 7 years ago.
Android-4.2.1-firefox-dialog2.png (76.4 KB) - added by Anna Tomanek 7 years ago.
Android-4.2.1-firefox-dialog-keyboard.png (87.2 KB) - added by Anna Tomanek 7 years ago.
Android-4.2.1-stock-dialog-cut.png (49.8 KB) - added by Anna Tomanek 7 years ago.

Download all attachments as: .zip

Change History (19)

Changed 7 years ago by Anna Tomanek

Changed 7 years ago by Anna Tomanek

Changed 7 years ago by Anna Tomanek

Changed 7 years ago by Anna Tomanek

Changed 7 years ago by Anna Tomanek

Changed 7 years ago by Anna Tomanek

Changed 7 years ago by Anna Tomanek

comment:1 Changed 7 years ago by Anna Tomanek

Status: newconfirmed

comment:2 Changed 7 years ago by Anna Tomanek

Description: modified (diff)

comment:3 Changed 7 years ago by Anna Tomanek

Another problem is that with zooming in and out (that is needed in order to find the dialog window on the page) the part of the window that was out of the viewport may be cut and one needs to force redrawing it by e.g. clicking another tab of the same dialog window.

Changed 7 years ago by Anna Tomanek

comment:4 Changed 6 years ago by Piotr Jasiun

Still a valid bug on Android 4.4.2 with Chrome 33. Also such bug exists on iOS (#8313 and #11721). I believe that these are two separate bugs:

  • dialogs are in the wrong position because window measure script does not consider zooming,
  • it is not possible to drag dialog because of general drag & drop issue on mobile (#11722).

comment:5 Changed 4 years ago by Szymon Kupś

Owner: set to Szymon Kupś
Status: confirmedassigned

comment:6 Changed 4 years ago by Szymon Kupś

Status: assignedreview

I did some research about this, and there are couple reasons why this behavior is happening:

  • Dialogs are positioned with JavaScript using listeners on window's resize event. When software keyboard is opened (to enter data into the dialog's fields) window size is changed and dialog is re-positioned again.
  • position: fixed is used in order to center dialog windows. When zooming in and out dialogs are scaled and positioned independently from document. It creates false illusion that dialog 'moves' around the screen when zooming. This is especially annoying when browser is automatically zooming into dialog's fields.

I've pushed branch:t/10082.
Proposed solution fixes some of the navigating issues. It's a new plugin that patches dialog plugin behavior (can be used optionally when mobile support is needed the most) :

  • Dialogs are positioned using CSS, no listener is attached to window resize event. When software keyboard is shown no re-positioning is performed.
  • position:fixed is changed to position:absolute. When zooming is performed dialog is scaled proportionally to current document.

Unfortunately this solution has its flaws:

  • Dialog navigation is performing better but there are situations (especially on big zoom levels) when its not perfect.
  • Dialog dragging is disabled.
  • position:absolute has disadvantages:
    • Dialog is positioned according to parent's container not the window. There are situations when document body is not occupying whole window area and then dialog is not positioned on the window's center.
    • Dialog is scrolled with the document.
  • Solution is not compatible with IE Quirks Mode.

I am putting this issue on review for now. Comments and new ideas are more than welcome. If the solution will be acceptable, plugin name and documentation will be needed.

comment:7 Changed 4 years ago by Szymon Kupś

Milestone: CKEditor 4.6.0

comment:8 Changed 3 years ago by Tade0

Status: reviewreview_failed

Overall this new plugin works is better than the regular dialog plugin, unfortunately there's one "but":

If the screen is oriented vertically and the dialog is opened rotating the device makes the dialog disappear from view, because it's positioned too low.

This could probably be fixed by repositioning the dialog on orientation change.

comment:9 Changed 3 years ago by Marek Lewandowski

Milestone: CKEditor 4.6.0CKEditor 4.6.1

comment:10 Changed 3 years ago by Marek Lewandowski

Milestone: CKEditor 4.6.1CKEditor 4.6.2

Moving to 4.6.2 minor release, as 4.6.1 is mostly about polishing 4.6.0.

comment:11 Changed 3 years ago by Marek Lewandowski

Milestone: CKEditor 4.6.2
Priority: NormalNice to have (we want to work on it)

This issue is not a priority ATM, however it would be nice to have it fixed in the future - adding to our todo list.

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy