Make WordPress Core

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#50073 closed defect (bug) (invalid)

Gutenberg Editor flickers while going from bottom to top

Reported by: kamlesh08's profile kamlesh08 Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.4
Component: Editor Keywords:
Focuses: Cc:

Description

Describe the bug
When we write 3-4 paragraphs on Gutenberg Editor and then scroll to the top, the size of right sidebar changes thus causing a noticeable flicker in the editor which distracts the user.

What happens is vertical scrollbar pops out when we scroll from bottom to top, however, it is hidden when we scroll from top to bottom!
Both behaviors are different and cause a distraction from the user's point of view.

Have a look at this video: https://www.loom.com/share/d9022adf8678432e934c6f4b8942da8e

To reproduce
Steps to reproduce the behavior:

Go to any 'Page'.
Start writing 3-4 paragraphs in 'Gutenberg Editor'.
Scroll to the top.
See error.
Expected behavior
There should be no change in size of the right sidebar and the user should have distraction-free writing experience.

Editor version

WordPress version: 5.4
Does the website has Gutenberg plugin installed, or is it using the block editor that comes by default?: Default Block Editor
Desktop (please complete the following information):

OS: Ubuntu
Browser: Google Chrome
Version: Version 81.0.4044.122 (Official Build) (64-bit)

Change History (4)

#1 @faisal03
4 years ago

Hi @kamlesh08 ,

Thank you for creating a ticket. It is because of the scroll bar, appears when you reach the top of the page.

However, I've checked it in the same WordPress version 5.4 in the Ubuntu system and Chrome browser. There are no issues.

https://drive.google.com/file/d/167ozER7BugJrLymoAS1WCQ-5i34PIRK_/view?usp=sharing

Please let me know if I missed something to re-generate it.

Last edited 4 years ago by faisal03 (previous) (diff)

#2 @thimalw
4 years ago

Hi @kamlesh08

I tested this with WordPress 5.4.2 and Google Chrome on macOS. It seems that the issue is caused by the Grammarly browser extension. More specifically by the Grammarly button that gets rendered outside the div of the block editor. So when the input which the Grammarly button is attached to gets scrolled out of the viewport, the Grammarly button (which is outside the block editor) follows the position of the input causing the scrollbar to appear.

#3 @kamlesh08
4 years ago

  • Resolution set to invalid
  • Status changed from new to closed

Hello,
Thanks for letting me know about this! :)

Thanks :)

#4 @SergeyBiryukov
4 years ago

  • Keywords needs-testing removed
  • Milestone Awaiting Review deleted
Note: See TracTickets for help on using tickets.