Skip to content

Links text and buttons UI are Overlapping with Zoom 200%, 400%, Text Scaling & High Dpi #1853

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
msftedad opened this issue Aug 10, 2022 · 15 comments · Fixed by #2469
Closed
Assignees
Milestone

Comments

@msftedad
Copy link

Environment Details

OS version: Windows11 version 21H2 (OS build 22000.856)
Edge version: 104.0.1293.47

Repro Steps:

  1. Open URL: Document (1).mhtml
  2. Apply text size to 200% and resolution 1280x720.
  3. And observe that "my heading is a list item" and "example" texts are getting to overlap

Actual Result:

After resizing and reflowing text is getting to overlap

Expected Result:

After resizing and reflowing text should not get overlapped

Screenshot Attachment:

image

@trusktr
Copy link
Member

trusktr commented Aug 13, 2022

Hello! The link is not working. It takes me to a Microsoft login page.

@msftedad
Copy link
Author

Hi Team,

Here is the open URL to reproduce the issue https://zorana-jankovic.github.io/example/#/

@trusktr
Copy link
Member

trusktr commented Aug 20, 2022

It is like trying to render desktop content on mobile if you zoom in like that. Why do you need to zoom like that? What do you think the solution should be?

@msftedad
Copy link
Author

msftedad commented Sep 1, 2022

Hi,

This is the common way low vision users can see the content without confusion.

According to the https://www.w3.org/WAI/WCAG21/Understanding/resize-text and https://www.w3.org/WAI/WCAG21/Understanding/reflow WCAG rules the content should not get overlapped.

@v-sudmandal
Copy link

v-sudmandal commented Sep 19, 2022

Hi @msftedad

Please let us know your plans on fixing this bug so that our team will regress and close it which makes the product compliant.

@SritejaGolla
Copy link

Hi @trusktr

Any update on the above bug ? Please let us know your plans on fixing this bug.

@v-sudmandal
Copy link

Hi @trusktr

Any update on the above bug?

@v-shamohsin
Copy link

Hello @trusktr

Can you provide an update on this please

@v-shamohsin
Copy link

Hi @trusktr , Can you please provide an update on this please. Thanks

@v-shamohsin
Copy link

Hi @trusktr , Can you please provide an ETA for the fix

@msftedad
Copy link
Author

Hi Team, is there any update on this bug?

@msftedad
Copy link
Author

Hi Team, Is there any update on this issue?

1 similar comment
@msftedad
Copy link
Author

msftedad commented Mar 7, 2024

Hi Team, Is there any update on this issue?

@jhildenbiddle jhildenbiddle modified the milestones: 6.x, 5.x Jun 16, 2024
@jhildenbiddle jhildenbiddle self-assigned this Jun 16, 2024
@jhildenbiddle jhildenbiddle linked a pull request Jul 19, 2024 that will close this issue
6 tasks
@jhildenbiddle
Copy link
Member

Hello @msftedad --

This issue will not be completely resolved by PR #2469 but it will (hopefully) be a little easier to deal with. The changes will be available when Docsify v5 is released.

Once v5 is release, the navbar height can be adjusted easily using the following CSS custom property:

:root {
  --navbar-height: 4em;
}

That said, stuffing a large number of elements into a horizontal navbar is going to be problematic regardless of the --navbar-height setting. I believe the intent of the original design (which was before my time) was to have either a limited number of root-level navbar items or to leverage drop-down menus in the when needed (as was done with the "Translations" menu on https://docsify.js.org):

- Translations

  - [:uk: English](/)
  - [:cn: 简体中文](/zh-cn/)
  - [:de: Deutsch](/de-de/)
  - [:es: Español](/es/)
  - [:ru: Русский](/ru-ru/)

There are several ways we could resolve the issue you've described, but each one has trade-offs. We may consider some of these options in a future redesign, but for now it is unlikely that we will change the navbar style/behavior to "fix" the issue as described here because there are alternative approaches that avoid the issue.

@msftedad
Copy link
Author

Thanks for the update.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants