1497833 - Item in a div overflows the div

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect, P3)

Description

[macareno.richard]

Attachment: Capture1.png

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:62.0) Gecko/20100101 Firefox/62.0

Steps to reproduce:

The problem is visible at Wikipedia in french, on the right of this pages :
https://fr.wikipedia.org/wiki/Mod%C3%A8le:Palette_Jeux_vid%C3%A9o_Batman
https://fr.wikipedia.org/wiki/Mod%C3%A8le:Palette_Fire_Emblem
https://fr.wikipedia.org/wiki/Mod%C3%A8le:Palette_Grand_Theft_Auto

Thoses 3 Wikipedia templates use the "Liste horizontale" template
https://fr.wikipedia.org/wiki/Mod%C3%A8le:Liste_horizontale

The "liste-horizontale" css class is loaded from :
https://fr.wikipedia.org/wiki/MediaWiki:Common.css
or
https://fr.wikipedia.org/wiki/MediaWiki:Mobile.css



Actual results:

Items in a div overflow the div :

See pictures of the bug :

http://clrmamepro.free.fr/wiki/bug/Capture1.png
http://clrmamepro.free.fr/wiki/bug/Capture2.png
http://clrmamepro.free.fr/wiki/bug/Capture3.png




Expected results:

The items should not overflow the div and be shwon IN the div.

This works fine in Goggle Chrome !!

A french developper, who contributes to Wikipédia in french assumes it's a Firefox problem.

See talk page :
https://fr.wikipedia.org/w/index.php?title=Discussion_mod%C3%A8le:Liste_horizontale&action=submit#Bug_d'affichage

Comment 1

[macareno.richard]

Attachment: Capture2.png

Comment 2

[macareno.richard]

Attachment: Capture3.png

Comment 3

[Panos Astithas (he/him) [:past] (please ni?)]

Let's get the web compat team to investigate.

Comment 4

[Karl Dubost💡 :karlcow]

There is this:

.liste-horizontale ul, .liste-horizontale ol, .liste-horizontale li {
	white-space: nowrap;
}

This is set both on list wrapper and list elements.
So no wonder why it does not break, now it indeed goes out of the box and it misses the wrapping opportunity. 

Ah interesting thing according to the computed style section in

Chrome Canary: white-space is normal for the span with the star.
Firefox Nightly: white-space is nowrap for the span. It inherits the nowrap.

if I'm adding, the wrapping is behaving like Chrome.

```css
.liste-horizontale li span {
	white-space: normal;
}
```

Comment 5

[Karl Dubost💡 :karlcow]

So now let's try  to figure out if this is a bug of Chrome or Firefox.

https://drafts.csswg.org/css-text-3/#propdef-white-space
this is a complex property.

Jonathan, do you know what is the correct behavior basically

hmmm wait… in my reduced test case. 
https://codepen.io/webcompat/pen/gBRQKo
the nowrap is inherited in Chrome too. Let's go back to the original CSS.
How did I get it different just before? The fix is still working  though. 


Ok the question remains about the difference.

Comment 6

[Karl Dubost💡 :karlcow]

Adding white-space: normal change a bit what they expect for this. 
They want to break at each li and not not in the middle.
 
ok the fix for them is:
in https://fr.wikipedia.org/wiki/Mod%C3%A8le:Palette_Fire_Emblem

.liste-horizontale ul, .liste-horizontale ol {
	white-space: normal;
}

.liste-horizontale li {
	white-space: nowrap;
}

Comment 7

[Karl Dubost💡 :karlcow]

Switching to sitewait as the reporter is part of the discussion on Wikipedia.

Comment 8

[vlakoff]

The snippet from comment 6 doesn't produce the expected result:

We indeed want the list items to be non-breakable,
but we also require the breaks to not happen before bullets (only after).

e.g., "_" representing non-breaking spaces: Foo_Foo_• Bar_Bar

Note there is also support for nested lists, which are rendered inline too, inside parentheses:
Astéroïde_apohele_• Astéroïde_géocroiseur (Aton_• Apollon_• Amor)_• Ceinture_d'astéroïdes

Also, note that when this template was written, IE 8 support was required, which lacks ":last-child" pseudo-class.
Nowadays, we can drop support for this browser, and use this pseudo-class if needed.

A while ago I tried to rewrite this code, in a simpler way, using li:after {content:"\a0• "}
but hadn't reached the end result because, AFAIR, of some pitfall with nested lists and/or breaks.

Comment 9

[Jonathan Kew [:jfkthame]]

The problem seems to be triggered by the stars that are prefixed to some of the items. It'd be helpful to have a minimal testcase that demonstrates the line-breaking issue without all the rest of wikipedia styling around it...

Comment 10

[vlakoff]

> The problem seems to be triggered by the stars that are prefixed to some of the items.

I had thought the same, but notice that "Modèle:Palette Jeux vidéo Batman" [1] also has the issue, though it doesn't contain any such picture.


[1] https://fr.wikipedia.org/wiki/Mod%C3%A8le:Palette_Jeux_vid%C3%A9o_Batman

Comment 11

[Jonathan Kew [:jfkthame]]

Hmm, interesting. Somehow related to the <small> elements within each list item there, perhaps?

Comment 12

[vlakoff]

The problem seems to occur at the <small> tag of the **last** <li> item.

I have tried to craft a minimal test case (find it below), but I got surprising results:
* On Firefox, it's the expected behaviour: it works fine, apart for the issue discussed here. The last item can exceed the border.
* On Chrome, all items can exceed the border! So the test case behaves differently than what we currently have on frwiki.

Although this test case doesn't completely matches the behaviour on frwiki, it's interesting to note that, here again, Firefox and Chrome don't behave the same.


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Bug 1497833</title>
    <style>
        .liste-horizontale ul,
        .liste-horizontale li {
            display: inline;
            white-space: nowrap;
        }
        .liste-horizontale li + li:before {
            white-space: normal;
            content: "· ";
        }
        /* Changes </li><li> to </li> <li>, if not already the case */
        .liste-horizontale li:after {
            content: " ";
        }
    </style>
</head>
<body>
    <div class="liste-horizontale" style="margin:5em; border:1px solid #aaa;">
        <ul>
            <li>foo bar</li> <li>foo bar</li> <li>foo bar</li> <li>foo bar</li>
            <li>foo bar</li> <li>foo bar</li> <li>foo bar</li> <li>foo bar</li>
            <li>foo bar</li> <li>foo bar</li> <li>foo bar</li> <li>foo bar</li>
            <li>foo <small>(bar baz qux quux corge grault)</small></li>
        </ul>
    </div>
</body>
</html>

Comment 13

[macareno.richard]

Hellow
What could we do to go further. This <small> problem should be fixed on Firefox side or MediaWiki side ?

Regards.

Comment 14

[vlakoff]

We should understand why browsers behave differently, and try to pinpoint unambiguously wrong renderings.

For example, when trying my use case above:
* Firefox: overflow only on last item
* Chrome: overflow on all items
* IE11: no overflow!

So IE11 would be the only good one here?

Comment 15

[Zebulon84]

If you add
   ul {
      padding-left: 0;
   }
Chrome will behave as IE/Edge ; it's a different bug.

I don't know what the W3C standard really defines, but IE11/edge is the expected behavior by random user.

A simplified version, without ul /li : 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Bug 1497833</title>
    <style>
        .list {
            white-space: nowrap;
        }
        .list > span::before {
            white-space: normal;
            content: "\a0- ";
        }
    </style>
</head>
<body>
    <div class="list" style="margin:5em; border:1px solid #aaa;">
        foo bar<span>foo bar</span><span>foo bar</span><span>foo bar</span><!--
     --><span>foo bar</span><span>foo bar</span><span>foo bar</span><span>foo bar</span><!--
     --><span>foo bar</span><span>foo bar</span><span>foo bar</span><span>foo bar</span><!--
     --><span>foo <span>(bar baz)</span></span>
    </div>
</body>
</html>

Comment 16

[Zebulon84]

This is not linked to ::before or content :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Bug 1497833</title>
    <style>
        .list2 {
            white-space: nowrap;
        }
        .wrap {
            white-space: normal;
        }
    </style>
</head>
<body>
    <div class="list2" style="margin:5em; border:1px solid #aaa;">
        foo bar baz -<span class=wrap> </span>foo bar baz -<span class=wrap> </span>
        foo <span>[bar baz]</span> -<span class=wrap> </span>foo <span>[bar baz]</span> -<span class=wrap> </span>
        foo <span>(bar baz) -</span><span class=wrap> </span>foo <span>(bar baz) -</span><span class=wrap> </span>
        foo <span>(bar baz)</span>
    </div>
</body>
</html>

Comment 17

[Firefox Bug Husbandry Bot]

Migrating Webcompat whiteboard priorities to project flags. See bug 1547409.

Comment 18

[Firefox Bug Husbandry Bot]

See bug 1547409. Migrating whiteboard priority tags to program flags.

Comment 19

[Firefox Bug Husbandry Bot]

See bug 1547409. Moving webcompat whiteboard tags to keywords.

Comment 20

[Adam Stevenson [:adamopenweb]]

I can still reproduce this issue in Firefox Nightly 71.
Adding sci-exclude tag, as it's a minor visual difference.

Comment 21

[Jeroen Kruis]

WP no longer sets white-space for the ul.