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

Invisible Canvas skeleton element blocks conversation scroll after closing Canvas #102

Open
itsmartashub opened this issue Jan 17, 2025 · 0 comments
Assignees
Labels
Bug Something isn't working Status: Hold for ChatGPT A/B Stabilization Waiting for the OpenAI to make its A/B testing more stable

Comments

@itsmartashub
Copy link
Owner

itsmartashub commented Jan 17, 2025

Description

When the Edit button (next to Copy code in the markdown header of code snippets) is clicked, a Canvas is opened for editing.
After closing this Canvas, an invisible element remains in the DOM, which blocks the scrolling of the conversation layout.
This issue occurs because the invisible element is positioned over the layout, and the user is not aware of its presence.

This behavior is consistent even when the browser extension is turned off, indicating that the issue originates from the original ChatGPT website.

The issue extends beyond just scrolling - it affects the GPThemes floating button toggle functionality.
The invisible element is actually a Canvas loading skeleton that serves as one of the key selectors for dynamically toggling the GPThemes floating button.

This causes inconsistent behavior when toggling the floating button between two states:

  1. When Canvas is open (floating button hidden)
  2. When Canvas is closed (floating button shown)

The problematic selector that interacts with this invisible Canvas skeleton is:

body:has(.absolute.z-20.h-full.transition-shadow.overflow-hidden.left-0 section.popover main [class*="absolute left-0 top-0 h-full w-full rotate-45 bg-gradient-to-r from-transparent via-black/20 to-transparent opacity-50 dark:via-white/5"])

Steps to Reproduce:

  1. Open any conversation with code snippets
  2. Click Edit button next to Copy code or Edit in Canvas from chat's footer
  3. Close the Canvas editor
  4. Try scrolling over the area where the code snippet was
  5. Observe the GPThemes floating button behavior - it will show incorrect states due to the persisting invisible Canvas skeleton affecting the selector

Suggested Fix:

  • Adding pointer-events: none to the invisible Canvas loading skeleton element could resolve this issue.
  • However, I will wait for the OpenAI team to address this, as the mistake is on their end.
  • Make GPThemes floating button always visible for now

Screenshots

Without GPThemes Without GPThemes
With GPThemes With GPThemes
Removed some styling to see what invisible element represents Removed styling
@itsmartashub itsmartashub added Bug Something isn't working Status: Hold for ChatGPT A/B Stabilization Waiting for the OpenAI to make its A/B testing more stable labels Jan 17, 2025
@itsmartashub itsmartashub self-assigned this Jan 17, 2025
@itsmartashub itsmartashub changed the title Invisible element blocks conversation scroll after closing Canvas Invisible Canvas skeleton element blocks conversation scroll after closing Canvas Jan 17, 2025
itsmartashub added a commit that referenced this issue Jan 18, 2025
…ow due to #102 (#103, #102)

- Remove visibility toggling based on Canvas skeleton state
- Keep GPThemes floating button permanently visible
- Resolve selector conflict with invisible Canvas skeleton element
- Addresses issues #102 and #103

Changes summary:
- Improved reliability of GPThemes floating button by making it consistently visible
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Something isn't working Status: Hold for ChatGPT A/B Stabilization Waiting for the OpenAI to make its A/B testing more stable
Projects
None yet
Development

No branches or pull requests

1 participant