[Bug] Issue on carbondesignsystem.com with firefox mobile

[atomspring]

When on a mobile device, the menu partially pokes out for carbondesignsystem.com when using Firefox. This causes people to worry that this great quality toolkit isn't fully compatible with the three browsers people think of: Chrome, Firefox, Safari.

[joshblack]

Hi there @atomspring! 👋 Is it possible to share screenshots of what is occurring along with info on the device used with Firefox mobile?

[atomspring]

Hey Josh, thanks for responding. I've attached a screenshot, you can see the menu poking out on the side. Menu entries are clickable, even in the "closed" state.

This is a Google pixel 3 running Android 12, Firefox mobile v100. This issue doesn't appear when browsing with chromium.

~A

-------- Original Message -------- On May 27, 2022, 08:15, Josh Black wrote:

Hi there @.***(https://github.com/atomspring)! 👋 Is it possible to share screenshots of what is occurring along with info on the device used with Firefox mobile?

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

[joshblack]

Hi @atomspring! Unfortunately, I'm unable to see the screenshot that you're describing. Is it possible that it got lost by responding via email? Wasn't sure how that flow works and if that was the source of the problem or not, feel free to correct me if I'm wrong here!

[atomspring]

Ah shoot, ok. I'm reattaching via GitHub, didn't realize attachments were limited by email.

[joshblack]

Thanks so much @atomspring! 🙏 Really appreciate it

[tw15egan]

I'm unable to reproduce running Firefox on my iPhone 13 Pro Max running iOS 15.5. Also checked Safari and Chrome and didn't see any issues. I tried running the Dev Tool emulator for an Android phone on Firefox Desktop, but I still can't replicate the issue. Can you check and see if this has been resolved? If not, can you provide what model phone/software you are running?

[tw15egan]

Closing as I am unable to reproduce

[atomspring]

Oh didn't realize this has been responded to, sorry about that.

Issue still exists with default install of firefox from google's play store, no add-ons or changed settings (v101.2.0 as of this writing).

Device is a pixel 3 running Android 12.

I've attached a screenshot of my browser dimensions, maybe that helps?

[tw15egan]

@carbon-design-system/developers Can someone with an Android device confirm this issue?

[atomspring]

Can this be reopened?

[atomspring]

Welp. Guess I'm not using this framework. Good luck guys!

[atomspring]

Figured out this issue, accidentally. Font size for my device was set to "Large" vs the stock "default", on resetting back to "default", carbon framework menus and such display correctly! Is there a way to programmatically detect/work around this? I'm sure the browser is supposed to handle this properly..

[dakahn]

@tw15egan This should be tagged as an accessibility issue since it effects users of increased font size. I was unable to repro with max font size on iOS using Safari. Each browser is going to handle dynamic fonts a little differently though

[atomspring]

@dakahn just wondering, if you install Firefox mobile on iOS, does it also suffer the same issue I did on Android?

[ljcarot]

@atomspring I installed FF on my iOS and it appears correctly. I'm on iPhone XR iOS 15.6.1. I have increased font size too and it still displays as expected.

[atomspring]

this happens on my Pixel 3 (Android 12) using Firefox 101.2. I have no add-ons, only default settings.

~A

-------- Original Message -------- On Jun 13, 2022, 12:36, TJ Egan wrote:

I'm unable to reproduce running Firefox on my iPhone 13 Pro Max running iOS 15.5. Also checked Safari and Chrome and didn't see any issues. I tried running the Dev Tool emulator for an Android phone on Firefox Desktop, but I still can't replicate the issue. Can you check and see if this has been resolved? If not, can you provide what model phone/software you are running?

IMG_77E699890E24-1

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>