The High Contrast text backplate of display:inline-block elements is drawn over adjacent inline text

By design Issue #11358420

Details

Author
Serkan
Created
Mar 22, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

The issue only occurs on Edge (IE and Firefox are ok) where an element (span in my example) with display: inline-block specified clips adjacent element left to him.

Here is the sample fiddle you can easily repro (you need to switch to one of the High Contrast settings from Windows settings.

https://jsfiddle.net/4evsc22q/

Attachments

1 attachment

Comments and activity

  • Microsoft Edge Team

    Changed Title from “On Edge when OS in High Contrast, element with display:inline-block clips the adjacent element” to “The High Contrast text backplate of display:inline-block elements is drawn over adjacent inline text”

    Changed Assigned To to “Ian P.”

    Changed Status to “Confirmed”

  • The problem is legit, not sure we can easily fix it though. Maybe we need to clip the backplate to the boundaries of the element for elements that establish their own drawing context?

  • Microsoft Edge Team

    Changed Status from “Confirmed” to “By design”

  • Thank you for the report - this is an expected behavior. As an author you have full control over presentation in high contrast using -ms-high-contrast media feature and -ms-high-contrast-adjust property. We intentionally draw a text backplate under each text block and in situation like you’ve described overlap is unavoidable in the current design

  • I don’t understand how this is by design. The contents of an element (or its backplate) should not extend beyond that element. We should be able to have adjacent elements without having to work around Edge rendering bugs.

    I don’t understand how this is unavoidable. The text backplates should be below the text.

You need to sign in to your Microsoft account to add a comment.

Sign in