prjct-samwest/scrollCue

Does this work in Safari?

Closed this issue · 4 comments

Hello.

I was on the verge of completing the basic layouting of my website and so, I decided to check it once in Safari. I'm running macOS in VMWare Workstation on Windows as that's my only source of testing. I was shocked to see that my webpage doesn't display any content that's using scrollCue.js in Safari only. The content is there as I can see my cursor responding to pointer events as I move it here and there or even click somewhere and navigate to a different page, but, it never gets visible. It's working great in Chrome and Firefox though, on Windows, Android and macOS.

So, I just wanted to confirm that since I don't have a real macOS to test if it's actually not working, would it be possible for you to confirm it? I doubt it's because of me running it in a virtual environment as most apps that don't need GPU, run just fine. But, if this hasn't been tested, it'd be great if you could maybe add support for Safari or automatically show the elements (that is, without any viewport based animation) if user is loading a webpage using Safari.

Hello.

I checked it on my mac environment and it worked fine.

The js and css libraries often depend on the browser version.
If you don't mind, can you tell me what version of safari you checked? Just for your reference.

I had thought that I should have mentioned the details, but, here you go:

macOS Catalina 10.15.6
Safari: 13.1.2
Website to check: https://hrishikeshk.netlify.app/
Here's my repository (needs Hugo to test): https://www.github.com/Hrishikesh-K/Portfolio/ (repo uses Git LFS, takes up 300 MiB+ space)

I checked your website.
After examining the issue, it seems that the problem is with matchMedia, not scrollCue.

The last line of script.js seems to be a bad thing.remove it and it works.
https://github.com/Hrishikesh-K/Portfolio/blob/4a1db0dbbfca8f69a9b784b90853feee8ed2730f/assets/js/scripts.js#L116

I'm not sure about matchMedia, so I'm just guessing, but addEventListener may not support safari.

I hope I can help you.

Seems like you're right. I should have checked Safari console before opening an issue.

But, it's strange. The same thing works in other browsers. I'm making using it to listen for changes in system theme (dark/light). I had found that code back when dark mode was just introduced and had never checked after that.

Sorry to bother you for this. Thanks for the help.