Using calc for line-height in display: table makes text wrap on top of itself

Confirmed Issue #11316961 • Assigned to Kevin B.

Details

Author
David S.
Created
Mar 17, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
Found in build #
15.15051
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

Reduction URL: https://jsfiddle.net/omvor30L/
Actual URL: https://next.smashingmagazine.com/2017/03/a-little-surprise-is-waiting-for-you-here–meet-the-next-smashing-magazine/
Smashing magazine bug: https://github.com/smashingmagazine/redesign/issues/104

Author’s expectation:
Text in figcaptions with more than one line of texy (such as second figure on page above) should be displayed as normal, with lines following each other down the page.

Actual:

Text is overwritten on top of the previous line

Reason:

Looks like it is caused by calc used on line-height, together with the element using display: table

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Greg W.”

    • It is also an issue with display: flex and display: -ms-grid

    • Microsoft Edge Team

      Changed Assigned To from “Greg W.” to “Kevin B.”

      Changed Status to “Confirmed”

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

    Sign in