Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sticky panel's left position does not consider scrollable ancestors' horizontal scroll #14570

Open
oleq opened this issue Jul 12, 2023 · 0 comments
Labels
domain:ui/ux This issue reports a problem related to UI or UX. intro Good first ticket. package:ui squad:core Issue to be handled by the Core team. type:bug This issue reports a buggy (incorrect) behavior.

Comments

@oleq
Copy link
Member

oleq commented Jul 12, 2023

📝 Provide detailed reproduction steps (if any)\

A follow-up of #5465.

To reproduce:

  1. Use http://fake.ckeditor.com:8125/ckeditor5-editor-classic/tests/manual/stickypanel.html
  2. Make the inner ancestor very wide (2000px)
  3. And scroll it horizontally in its parent (outer ancestor).

2023-07-12 16 46 14

2023-07-12 16 32 49

✔️ Expected result

The sticky panel does not change its left position when getting sticky.

❌ Actual result

It gets moved a few dozen pixels away.

❓ Possible solution

This happens because we set the panel's margin-left based on the window's horizontal scroll only. We need to consider additive horizontal scroll positions of all ancestors instead

this._marginLeft = toPx( -global.window.scrollX );


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

@oleq oleq added type:bug This issue reports a buggy (incorrect) behavior. package:ui intro Good first ticket. labels Jul 12, 2023
@Witoso Witoso added domain:ui/ux This issue reports a problem related to UI or UX. squad:core Issue to be handled by the Core team. labels Sep 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
domain:ui/ux This issue reports a problem related to UI or UX. intro Good first ticket. package:ui squad:core Issue to be handled by the Core team. type:bug This issue reports a buggy (incorrect) behavior.
Projects
None yet
Development

No branches or pull requests

2 participants