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

[Bug]: sp-card (supplied with an actions slot) action menu elements overlaps with neighbouring component in Safari versions and Firefox. #4239

Open
1 task done
jaya-Adobe opened this issue Apr 3, 2024 · 1 comment
Labels
bug Something isn't working triage An issue needing triage

Comments

@jaya-Adobe
Copy link

Code of conduct

  • I agree to follow this project's code of conduct.

Impacted component(s)

sp-card, sp-grid, firefly autodub lipsync module.

Expected behavior

On opening of action menu in sp-card, the action menu should be at top layer and should not overlap as here (image taken from sp-card-documentation chrome):
Screenshot 2024-04-02 at 12 47 05 PM

Actual behavior

On opening of action menu in sp-card, the action menu hides behind the neighbouring component sharing same pixels.
image taken from sp-card-documentation Safari 16.4/16.6 version.
Screenshot 2024-04-02 at 12 47 15 PM
This issue also happens on Firefox.

Screenshots

In firefly project the issue persists as this:
Screenshot 2024-04-02 at 12 52 28 PM

What browsers are you seeing the problem in?

Firefox, Safari

How can we reproduce this issue?

  1. On Safari 16.4 version or Firefox, go to firefly stage url
  2. Click on auto dub and lip sync module OR directly navigate to autodub-module
  3. Upload your file and autodub content by hitting generate.
  4. Once dubbed file is generated, hit back to upload page again.
  5. The queue should be visible, click on three dots (action-menu) of sp-card.
  6. The action menu hides behind the neighbouring components.

Sample code that illustrates the problem

No response

Logs taken while reproducing problem

No response

@jaya-Adobe jaya-Adobe added bug Something isn't working triage An issue needing triage labels Apr 3, 2024
@Westbrook
Copy link
Collaborator

Without an abstract reproduction we're not likely to revisit this beyond sharing the application level mitigation steps that can be leveraged when delivering Overlaid content in polyfilled browsers: https://opensource.adobe.com/spectrum-web-components/components/overlay/#fallback-support When making a repro, we highly suggest you start from something like https://studio.webcomponents.dev/edit/0lwluuJO4nR1daE9dyRw?p=stories wherein you can recreate the situation devoid of any application level interference in order to support finding any component specific change that may be necessary here.

Related, you've referenced this as also being a Firefox issue, but I do not expereience in Firefox:
image
Additional information about your experience and the versions you are experiencing it in in that context would be greatly appreciated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working triage An issue needing triage
Projects
None yet
Development

No branches or pull requests

2 participants