figcaptions with more than one line overlaps in Edge

[dstorey]

URL: https://next.smashingmagazine.com/2017/03/a-little-surprise-is-waiting-for-you-here--meet-the-next-smashing-magazine/ Reduction: https://jsfiddle.net/omvor30L/

Browser: Edge 15

Expected:

Images with figcaptions on two lines (such as second figure) should have readable text

Actual:

all text is displayed on one line and overlaps each other.

Reason:

calc used in line-height. Remove the calc and it works as expected.

[dstorey]

Edge bug https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11316961/

[vitalyfriedman]

Dear @dstorey — is there any way to keep the calc() and still make it work in Edge?

[avvertix]

@vitalyfriedman @dstorey Seems that the solution I proposed here https://github.com/smashingmagazine/redesign/issues/76#issuecomment-287601524 reduces the impact of the Edge bug. I tried only on the URL mentioned in the issue.

Hope it helps

[dstorey]

@vitalyfriedman I believe this only breaks due to combination of display table and calc in line-height. If calc must be kept then removing display table would fix it. If I remember correctly the original uses viewport units, which may potentially cause a11y issues (although in this case it might be less as it isn't purely using viewport units)