search

patrickmatte / scroll-capture

18 stars 5 forks source link

MouseEvent hover states not showing #37

Closed miller-thinkso closed 5 months ago

miller-thinkso commented 5 months ago

The link's hover state is not displaying when using the MouseEvent click. Here's a 1 min recording of what's happening. I set up a MouseEvent Click, but the tool jumps directly to that page without showing the hover state of the link.

https://www.loom.com/share/8cb7fec2b2824d36a37d2898173e1308?sid=cb432146-5b95-4835-9018-d5f3373275fa

This is the site I'm using the tool on: https://thinkso-catapult.squarespace.com/ Password: thinkso-catapult

This is the recording we want to show:

  1. Homepage mainstage animation
  2. Scroll down to the navy section.
  3. Mouse over "Performances" link in main menu. The dropdown should automatically display.
  4. Hover over Live Opera to show hover state.
  5. Hover over Digital Operas to show hover state.
  6. Click Digital Operas to navigate to that page.
patrickmatte commented 5 months ago

Hi, thanks for the screen capture!

I took a quick look but I'm not sure what is happening. One thing for sure is that you'd need to select the "mouseover" event instead of "click" to open the drop down menu, but I just tried it myself and it still didn't work. Even the hover states inside the page don't work.

I'm a bit busy this afternoon but I'll try to dig in a little more tonight.

On Tue, Mar 12, 2024 at 11:42 AM miller-thinkso @.***> wrote:

The link's hover state is not displaying when using the MouseEvent click. Here's a 1 min recording of what's happening. I set up a MouseEvent Click, but the tool jumps directly to that page without showing the hover state of the link.

https://www.loom.com/share/8cb7fec2b2824d36a37d2898173e1308?sid=cb432146-5b95-4835-9018-d5f3373275fa

This is the site I'm using the tool on: https://thinkso-catapult.squarespace.com/ Password: thinkso-catapult

This is the recording we want to show:

  1. Homepage mainstage animation
  2. Scroll down to the navy section.
  3. Mouse over "Performances" link in main menu. The dropdown should automatically display.
  4. Hover over Live Opera to show hover state.
  5. Hover over Digital Operas to show hover state.
  6. Click Digital Operas to navigate to that page.

— Reply to this email directly, view it on GitHub https://github.com/patrickmatte/scroll-capture/issues/37, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADKN637A7HR2MTYCCBVLJLYX4O67AVCNFSM6AAAAABESP2WPWVHI2DSMVQWIX3LMV43ASLTON2WKOZSGE4DCOJYGE2TONQ . You are receiving this because you are subscribed to this thread.Message ID: @.***>

miller-thinkso commented 5 months ago

@patrickmatte Would it have anything to do with it being a Squarespace site? I tested it on another Squarespace site we designed and it's not working here either: https://www.heroeslinked.org/

But it works fine on our company website https://thinkso.com/ (though you still can't see the cursor icon, you can at least see the hover states).

patrickmatte commented 5 months ago

Scroll Capture needs to read the stylessheets to be able to trigger the css :hover states. But on your website, and apparently all of squarespace's websites, the css file is hosted on a different server(squarespace CDN) than the one serving the html page. So that creates a CORS error and scroll capture cannot read the stylesheets to reproduce the hover states.

This error is described in this thread on stackoverflow https://stackoverflow.com/a/49994161/3598370 The workaround is to add crossorigin="anonymous" on the stylesheet element in the html page but I don't know if you can do that for squarespace.

So that explains why the :hover states don't work but I still don't know why your pull down menu doesn't appear.