Bug 306779 – discord.com: Formatting menu is way above text box

• Component: Layout and Rendering
• Status: RESOLVED FIXED

Steps:
1. Visit discord.com (discord.com/login) [Otherwise it offers App to download]
2. Sign in
3. Type some text
4. Select text
Notice that the formatting menu is way above the text box, almost unnoticeable.

The formatting menu does not show up on 22G100.

rdar://162719481

[Karl Dubost]

<rdar://162719481>

[Karl Dubost]

It would be great to have a test case reduction.

Reposting for Bugzilla:

The bug reproduces outside of Discord with a plan <input> element. <getBoundingClientRect()> returns incorrect coordinates when iOS keyboard is open. I’ve attached a test case. 
Test case reproduction steps:

  1. Open the test case in Safari on iOS
  2. Tap the input field to open the keyboard
  3. Observe the red dot position

Expected: The red dot appears at the top edge of the input field (where getBoundingClientRect().top reports it to be)

Actual: The red dot appears far above the input field when the keyboard is open, demonstrating that getBoundingClientRect() returns coordinates that don't match the element's visual position on screen.

Note: This issue does not occur on Android. The red dot remains correctly positioned at the input's top edge when the keyboard is open, indicating that Android browsers correctly account for the keyboard when calculating bounding client rect coordinates.

Created attachment 478240 [details]
Test Case

[Ahmad Saleem]

When I close virtual keyboard, it seems to fix and red dot appear on right place, so it might because of virtual keyboard, we are doing some offset in values, which we shouldn't do.

Pull request: https://github.com/WebKit/WebKit/pull/58092

[EWS]

Committed 307378@main (fd191036e4de): <https://commits.webkit.org/307378@main>

Reviewed commits have been landed. Closing PR #58092 and removing active labels.