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

[5.x]: Screenshot modal in Plugin Store not displaying correctly in Safari #16342

Open
mediakreativ opened this issue Dec 18, 2024 · 0 comments
Assignees
Labels

Comments

@mediakreativ
Copy link

mediakreativ commented Dec 18, 2024

Description

In the Plugin Store within Craft CMS, the screenshot modal behaves incorrectly in the Safari browser. The following issues occur when viewing plugin screenshots:

  • The screenshot modal does not fill the full viewport as it does in Chrome.
  • The screenshots are only visible after scrolling down significantly.
  • The carousel indicators appear at the very bottom and require scrolling to be seen, which hinders usability.

Steps to reproduce

  1. Open the Craft CMS Admin and navigate to the Plugin Store using Safari
  2. Select any plugin that contains screenshots.
  3. Open the screenshot modal.
  4. Observe the following issues:
  • The modal does not fill the viewport.
  • Screenshots and carousel indicators are not immediately visible and require scrolling.

Expected behavior

  • The modal should fill the full browser viewport (width and height).
  • Screenshots should be visible immediately without scrolling.
  • The carousel indicators (dots) should be clearly visible and accessible without scrolling.

Actual behavior

  • The screenshot modal does not fill the full viewport as it does in Chrome.
  • The screenshots are only visible after scrolling down significantly.
  • The carousel indicators appear at the very bottom and require scrolling to be seen.

ImageImage
Image

Craft CMS version

5.5.7

PHP version

8.2.24

Operating system and version

macOS Sonoma (14.6.1) / Safari Version 17.6

Database type and version

MySQL 8.0.36

Image driver and version

Imagick 3.7.0 (ImageMagick 6.9.11-60)

Installed plugins and versions

  • Blocksmith v1.2.3 (but problem appears without installed plugins too)

Additional notes

By moving the #screenshot-modal element outside of .ps-wrapper and directly into the <body> tag, the modal displays correctly in Safari. This suggests that CSS or layout styles applied to the parent container .ps-wrapper are interfering with the modal's positioning and sizing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants