Note value icons are not displaying on Apple devices (Safari and Chrome)

sugarlabs / musicblocks

Music Blocks -- A musical microworld

https://musicblocks.sugarlabs.org/

GNU Affero General Public License v3.0

589 stars 828 forks source link

Note value icons are not displaying on Apple devices (Safari and Chrome) #3681

Open pikurasa opened 10 months ago

pikurasa commented 10 months ago

Description

I noticed this on my friends MacBook, and I was able to reproduce just now on an iPad. I was able to reproduce on both Safari and Chrome.

Expected Behavior

I expect the note value icons to display.

Screenshots

20240125_162853 20240125_162913

Environment:

Operating System: macOS
Browser: Chrome and Safari
Version of Software/Project: musicblocks.sugarlabs.org (as of 1/25/2024

mohitvdx commented 10 months ago

Hello @pikurasa,

This problem is not specific to MusicBlocks. I've encountered an issue with the rendering of musical symbols on various websites when accessed through Apple devices.

_https://www.alt-codes.net/music_note_alt_codes.php_ Above is a website for example.

I've noticed this issue across multiple websites, and it seems to be related to font rendering on Apple devices. This problem is not specific to a particular website but seems to be a broader concern.

dhruvchandak30 commented 10 months ago

What if we add a backup image or alternate text!

pikurasa commented 10 months ago

Are we able to add a conditional that checks whether we're running on Mac's build of Chrome or Safari, then display an image instead of a font?

dhruvchandak30 commented 10 months ago

I don't have a mac So couldn't test it, but found these...

Check if the browser is Chrome on a Mac const isMacChrome = navigator.userAgent.includes('Macintosh') && navigator.userAgent.includes('Chrome');
Check if the browser is Safari on a Mac const isMacSafari = navigator.userAgent.includes('Macintosh') && navigator.userAgent.includes('Safari'); OR var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

kaiciek commented 7 months ago

I have a mac and I'd like to fix this issue, but I'm having trouble finding where these note blocks (whole, half, etc.) are implemented in the codebase. I looked under WidgetBlocks.js or the widgets folder, but I seem to be missing them. This is my first time contributing to an open source project.

omsuneri commented 1 month ago

@pikurasa I also got the thought that we will check the browser and apply image in place of symbols for Mac users will update you soon