Page MenuHomePhabricator

Menu collapse turns into infinite animation on some screen sizes
Closed, DuplicatePublic

Description

Steps to reproduce:

  1. Make sure you're logged OUT
  2. Visit a file description page on the German Wikipedia project that has no local description, e.g. https://de.wikipedia.org/wiki/Datei:Chernozem_distribution.JPG
  3. Note how the upper bar next to the search box has four buttons with rather long labels
  4. Depending on your viewport width you will see these four labels in three different ways:

4.1 - big screen: All four labels are visible
4.2 - small screen: "Lesen" and "Lokale Beschreibung hinzufügen" are visible, the other two are collapsed into the "Mehr" (more) menu
4.3 - medium sized screen: The four labels are continously switching between the 4.1 and 4.2 behaviours, causing a constant animation that is annoying and makes the buttons unsuable

This problem occurs every time.

Initially seen on Windows 10 with latest Firefox 50.1.0. Also happens in Chrome 55.0.2883.87 and Microsoft Edge 38.14393.0.0, so it's probably not the browser's but the CSS's fault.

Although I haven't looked into it too deep, I guess some CSS rules are conflicting, causing the li's to switch between display:block and display:list-item and change their width continously. The 'animation effect' is most likely caused by some transition rule.

The problem does not occur on English (https://en.wikipedia.org/wiki/File:Chernozem_distribution.JPG - not as many buttons) or French (https://fr.wikipedia.org/wiki/Fichier:Chernozem_distribution.JPG - works correctly) Wikipedias (haven't checked any more languages).