chatgpt.com - design is broken

[Mr-Twave]

URL: https://chatgpt.com

Browser / Version: Firefox 126.0
Operating System: Windows 10
Tested Another Browser: Yes Edge

Problem type: Design is broken
Description: Items are misaligned
Steps to Reproduce:
Summary:
Erratic Screen Scrolling When Editing Messages in ChatGPT on Firefox 126.0 (64-bit)

Product: ChatGPT
Component: Textboxes

Version: ChatGPT [Specify version if applicable]
Hardware: [Specify hardware if applicable]
OS: [Specify operating system]

Description:
When using Firefox 126.0 (64-bit) to edit messages in ChatGPT, the screen scrolls erratically if the chat length exceeds the visible screen size. This issue does not occur when using Microsoft Edge.

Steps to Reproduce:

Open ChatGPT in Firefox 126.0 (64-bit).
Ensure Firefox is windowed with both the URL bar and the browser tabs bar visible at the top.
Navigate to a chat with a length greater than the visible screen size (1920x1080 resolution).
Press the "edit" button on any message in the chat.
Begin typing in the textbox.

Actual Results:

The screen jerks and scrolls down erratically, alternating between moving down the length of the chat and showing the area a line before the cursor.
This issue occurs when the edit area exceeds the visible portion of the chat window.

Expected Results:

The screen should remain stable, displaying the cursor and the text being typed without erratic scrolling.

Additional Information:

This issue does not occur when using Microsoft Edge.
The problem is specific to Firefox 126.0 (64-bit).
The issue is observed on a 1920x1080 maximum resolution screen.
The problem is more noticeable when the chat length is significantly larger than the screen size.

Severity:
Normal

Priority:
Medium-High

Browser Configuration

• None

From webcompat.com with ❤️

[azlata]

We appreciate your report but I was not able to reproduce this issue. I was able to edit a message without encountering any issues.

20.05.2024_10.32.22_REC.mp4

Tested on:
• Browser / Version: Firefox Release 126.0 (64-bit)
• Operating System: Windows 10

Suggestions:
• Clear cache/data/cookies, disable Ad-blocker (if available), or create a new profile (without syncing/importing data) and check again
• If there are any changes made to the default settings of the browser (e.g. in about:config), please revert to the default settings

[qa_21/2024]

[Mr-Twave]

This issue occurs when the edit area exceeds the visible portion of the chat window.
Additional condition: The issue occurs when the edit area is at a cursor position exceeding the length of the visible portion of the chat window from the start of the edited message.

[azlata]

Can you please send us a screen recording of this scenario?

[inv_21/2024]

[Mr-Twave]

Will provide in approximately 4 hours or less. Any preference for recording software?

Edit: there's some private information on the recording page. Please provide me privately contact info in which I can share my recording.

Thank you.

[IlyaRice]

Issue persist on Google Chrome Version 125.0.6422.113 (Official Build) (64-bit)

I added two recordings:

1. In first it is nothing wrong while editing short message .
2. On the second, when I add text to the bottom of long message, it autoscroll so high up, as if it had disappeared altogether.

chrome_996gGRSBmA.mp4

chrome_kNCUzqhnfx.mp4

Main keys to recreate issue:

1. edited message longer than one screen height,
2. there is conversation after edited message at least two screens height

[Mr-Twave]

Microsoft Edge's behavior on Windows 10 is different. When editing the textbox, the page's top always seems to go one or two lines below the edit area with long edit text boxes as long as there is at least a window's extra area below it.

[softvision-raul-bucata]

We appreciate your report. Based on what you described, the issue can be reproduced on other browsers and it is not a Compatibility issue.

For this project, we try to focus our effort on layouts, features, or content of the page that works as expected in one browser but not in another.

Tested with:

Browser / Version: Firefox Release 126.0 (64-bit)/ Chrome Version 125.0.6422.113 (Official Build) (64-bit)
Operating System: Windows 10 PRO x64

[inv_22/2024]

[Mr-Twave]

@softvision-raul-bucata I think you've missed the difference between Firefox and the other browsers, as I did not explicitly point it out.

• Behavior in Firefox, Edge, Google Chrome, and Most Other Browsers:

  • In typing characters, the edit cursor's line shifts above the line below the top edge of the browser screen when:
    • The edit message is longer than the screen length.
    • The cursor is positioned at a place within the edit box longer than the screen length.

• Behavior in Firefox:

  • Typing character-by-character causes the screen to alternately jump between two positions (not like other browsers):
    1. The edit cursor's line below the top edge of the browser screen (like other browsers)
    2. A distance away from position in (a.) proportionate to distance between the top of the edit box and the cursor line's placement within the edit box. (not like other browsers)

Can I please have a link in which I can privately deposit a video, as my GPT profile obviously contains personally identifiable information at the top right hand corner? The issue is in fact different with Firefox than it is with other browsers.

[IlyaRice]

my GPT profile obviously contains personally identifiable information

Just blur or crop confidential info, what is the problem?

[Mr-Twave]

my GPT profile obviously contains personally identifiable information

Just blur or crop confidential info, what is the problem?

I do not know a free video editing tool that does this, it's very much user-hassle to find one and use it if it exists.

[softvision-raul-bucata]

@Mr-Twave is it possible to send it via email?

[inv_23/2024]

[Mr-Twave]

Yes, can I have a contact link?
@softvision-raul-bucata

[softvision-raul-bucata]

@Mr-Twave Please send it at rbucata@mozilla.com

[inv_23/2024]