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

Environment Details

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

Repro Steps:

Open URL: Document (1).mhtml
Apply text size to 200% and resolution 1280x720.
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:

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

Hi Team,

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

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?

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.

@msftedad

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.

@trusktr

Hi @trusktr

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

@trusktr

Hi @trusktr

Any update on the above bug?

@trusktr

Hello @trusktr

Can you provide an update on this please

@trusktr

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

@trusktr

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

Hi Team, is there any update on this bug?

Hi Team, Is there any update on this issue?

@msftedad

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.

Thanks for the update.

Navigation Menu

Repository navigation

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

Environment Details

Repro Steps:

Actual Result:

Expected Result:

Screenshot Attachment:

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Environment Details

Repro Steps:

Actual Result:

Expected Result:

Screenshot Attachment:

Activity

trusktr commented on Aug 13, 2022

msftedad commented on Aug 17, 2022

trusktr commented on Aug 20, 2022

msftedad commented on Sep 1, 2022

v-sudmandal commented on Sep 19, 2022

SritejaGolla commented on Sep 26, 2022

v-sudmandal commented on Oct 7, 2022

v-shamohsin commented on Jan 4, 2023

v-shamohsin commented on Jan 18, 2023

v-shamohsin commented on Jan 27, 2023

msftedad commented on Apr 21, 2023

msftedad commented on Jan 12, 2024

msftedad commented on Mar 7, 2024

jhildenbiddle commented on Jul 19, 2024

msftedad commented on Jul 22, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions