search

naumch1k / one-fall

Landing page for ONE FALL, Salem-based melodic punk and hardcore quartet has rapidly made a mark in New England
https://develop--one-fall.netlify.app/
0 stars 0 forks source link

BUG: Hover Effects Missing in Microsoft Edge Due to Browser Window Border #6

Open naumch1k opened 1 month ago

naumch1k commented 1 month ago

Describe the bug

Several UI elements do not display hover styles when using the Microsoft Edge browser

To Reproduce

Steps to reproduce the behavior:

  1. Go to https://develop--one-fall.netlify.app/
  2. Click on MUSIC link in the main navigation menu
  3. Locate the BUY DIGITAL ALBUM button for the album "One Fall"
  4. Hover the cursor over the BUY DIGITAL ALBUM button

Expected behavior

The background color of the BUY DIGITAL ALBUM button should change to yellow when hovered over

Actual behavior

In Microsoft Edge, the background color of the BUY DIGITAL ALBUM button does not change when hovered over

Screenshots, Video, GIFs

https://github.com/naumch1k/one-fall/assets/76534205/0c4626dd-3dc7-4193-8321-19640c5dceb4

Desktop:

Additional context

Other affected elements include Audio Track, Event Link, Merch Card image, and Merch Card BUY ON BANDCAMP button.

The issue appears to be caused by Microsoft Edge having a border around the window that reduces the viewport width by at least 8px. Hover effects in our project are set kick in at a minimum screen width of 1280px. Changing the media query to @media screen and (min-width: 1272px) resolves the issue.

Additionally, during the debugging process, it was also discovered that layouts originally intended for tablet landscape are now applied on smaller desktop devices in Microsoft Edge for the same reason.

https://github.com/naumch1k/one-fall/assets/76534205/993bbfa3-1bb9-4035-8aa3-305f3c3484e3

github-actions[bot] commented 1 month ago

@naumch1k 👋

Thanks for dropping in with the issue! Our team is ready to dive into it as soon as possible! 🚀

If you would like to work on this issue, please wait for us to decide if it's ready; hang tight until we've given it the green light. The issue will be ready to work on once we remove the Needs triage label.

To claim an issue that does not have the Needs triage label, please leave a comment that says ".take". If you have any questions, please follow up on the issue itself.

For full info on how to contribute, please check out our contributors guide.

Let's make some magic together! ✨

naumch1k commented 3 weeks ago

Some of the more complicated interactions might not look right if we change all desktop breakpoints to 1272px right now. We need to adjust those first before working on this issue.