search

ckeditor / ckeditor5

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.
https://ckeditor.com/ckeditor-5
Other
9.61k stars 3.7k forks source link

[Safari / iOS] Sticky toolbar floats away on Safari on iOS (iPhone, iPad) #7718

Open niegowski opened 4 years ago

niegowski commented 4 years ago

📝 Provide detailed reproduction steps (if any)

  1. Open classic editor on iPad
  2. Scroll page - toolbar gets sticky
  3. Zoom page and scroll horizontally

Similar, if not worse issues can be reproduced on iPhone.

✔️ Expected result

Sticky toolbar is aligned with editor

❌ Actual result

📃 Other details

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

niegowski commented 4 years ago

this might be related or DUP #1280

Reinmar commented 4 years ago

Let's spend 1-2MD on research. Apple released some new API in Safari (I don't remember its name, though) and perhaps it could be helpful here. Although, it may also happen that we don't actually need any new APIs to fix this particular issue.

In any case, let's not spend too much time on this ;).

Reinmar commented 3 years ago

Useful link:

Reinmar commented 3 years ago

Worth considering: Making EditorUI#update fire in cases the visual viewport changes.

Reinmar commented 3 years ago

We'll continue the research that started in #10816 and if it goes well, we'll get back here to fix the original issue in this ticket.

oleq commented 2 years ago

The inline editor does not look good either

https://user-images.githubusercontent.com/1099479/144394550-06aef7fa-e8da-45cc-b3a2-114aab48f4ea.MP4

michalbilik commented 1 year ago

Another scenario:

  1. Open https://ckeditor.com/docs/ckeditor5/latest/examples/builds-custom/full-featured-editor.html on iOS.
  2. Click Source on the toolbar.
  3. Scroll up and down.

https://github.com/ckeditor/ckeditor5/assets/50703222/86684fd8-d99a-4226-8626-f1912841966f

michalbilik commented 2 months ago

Also reproducible on Safari when resizing the browser.

Steps

  1. Open https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html
  2. Scroll down until the toolbar sticks to the top.
  3. Resize the window.

https://github.com/user-attachments/assets/e5302e3d-eb5f-42db-b7ea-4cf6fa29e4b7