Page MenuHomePhabricator

Long URL in bibliography not wrapped correctly in Edge/IE
Open, Needs TriagePublic

Description

Minor layout issue, it seems a long URL in the bibliography section makes the page too wide. I searched a bit and couldn't find a similar bug.

Steps to Reproduce:

  1. Open https://es.wikipedia.org/wiki/Ej%C3%A9rcito_Zapatista_de_Liberaci%C3%B3n_Nacional in IE / Edge
  2. Page is too wide

Can reproduce in Edge 40.15063.0.0 and IE 11.608.15063. Fine in latest Chrome / Firefox.
Windows 10, screen resolution 3000x2000, DPI 200%

Expected Behavior (Chrome 61.0.3163.91):

chrome correct.png (644×2 px, 188 KB)

Result in Edge 40.15063.0.0:
ie-incorrect.png (791×2 px, 209 KB)

wiki-bug.gif (639×992 px, 716 KB)

Event Timeline

Since it seems test2.wikipedia.org doesn't have the Spanish encyclopedia I couldn't test the same page or find one similar to it, sorry I'm new at this!

Hi @jaydenmilne, thanks for taking the time to report this!
I currently don't see how there is anything in MediaWiki code to fix.
This looks rather like code in Edge/IE to fix?
Have you reported this to the Edge/IE developers?

I have not, while this definitely is a quirk in Edge's rendering engine I thought that there could be a CSS workaround.
Adding word-wrap:break-word to the <ul> or the <li> makes it render as expected

word-wrap.png (1×3 px, 354 KB)

I have not tested this in another browser

(see here for where I got this)

This is a new CSS3 feature, I don't know what older browsers you are supporting but this might not work