Observation map blocks content when using large fonts

[joseph103]

Please fill out the following sections to the best of your ability, it will help us investigate bugs if we have this information at the outset. Screenshots are especially helpful, so please provide those if you can.

Platform (Android, iOS, Website): Website

App version number, if a mobile app issue (shown under Settings or About):

Browser, if a website issue (Firefox, Chrome, etc) : Chrome

URLs (aka web addresses) of any relevant observations or pages: https://www.inaturalist.org/observations/joseph103

Screenshots of what you are seeing (instructions for taking a screenshot on computers and mobile devices: https://www.take-a-screenshot.org/):

Description of problem (please provide a set of steps we can use to replicate the issue, and make as many as you need.):

Step 1: Chrome Settings

Step 2: Appearance

Step 3: Font Size

Step 4: Extra Large

With this setting the map blocks the top part of the “Needs ID” or “Research Grade” no matter how much you change adjust the font using Ctrl-Mouse wheel. The map simply will not move no matter what.

[dianastuder]

https://forum.inaturalist.org/t/map-covers-your-observations-when-accessed-from-dashboard/12577/11

You need to set Chrome on
Medium - recommended

Then zoom to suit for reading comfort.

[bug_girl]

Welcome to the forum!

[fffffffff]

M, on iPad it’s always like that for me, and I can’t change it, at least don’t know how.

[joseph103]

Yes, the problem can be worked around by setting the Chrome font to medium. I was aware of that when I reported this bug. This is not a problem with Chrome. The issue occurs the same way if you increase your default font size in Firefox as well. Firefox does not have a “recommended” font size. Haven’t checked other browsers.

There are plenty of reasons why some of us may wish to select a larger default font size for general web browsing. Is it really good web design to require users select a different default font for all web sites in order to make one particular site (this one) work properly?

I looked at the link you posted and see that setting the font to “medium” was considered a solution and the case “closed.” This is not good web design. A much better solution would be to allow the map popover to be closed or moved.

[caththalictroides]

Strong yes. This is an accessibility issue for people with vision problems, dyslexia, and probably a host of other medical conditions.

[kitty12]

Exactly. Close to good enough isn’t good enough.

[dianastuder]

Then you can make it a Feature Request for accessibility.

[tiwane]

Added this to my weekly report to developers. For what it’s worth, this is one of the oldest pages on the site.

[tiwane]

OK, we made some changes to this page - basically, it’s now responsive to text and window size. If the text size is increased, the map won’t cover the text. If the text size and/or window size don’t allow for the map to be displayed on the right, the map will move to the bottom of the page.

Here’s what it looks like with a font size of 24 in Firefox (with a 20% browser zoom as well, which is what I use by default for iNat):

And if I keep making the window more narrow…(the map has now been moved to the bottom)

[joseph103]

Thank you very much! Tested in Chrome and it works great.