Last modified: 2014-02-12 23:55:04 UTC
The list of chocolate bar brands table fails to render correctly on the iphone (ios 6.x). The list only displays one row when viewed on the mobile site. There are hundreds of rows that are not viewable with the mobile interface. The same rendering issue can be seen when vieweing the mobile url with firefox or google chrome from a normal desktop. https://en.m.wikipedia.org/wiki/List_of_chocolate_bar_brands The w3c validator gives 99 warnings and 7 errors: http://validator.w3.org/check?uri=http%3A%2F%2Fen.m.wikipedia.org%2Fwiki%2FList_of_chocolate_bar_brands&charset=%28detect+automatically%29&doctype=Inline&group=0&outline=1&No200=1&verbose=1#preparse_warnings The overwhelming majority of these errors are "Attribute srcset not allowed on element img at this point."
Don't use W3 validator, it is not useful in this case, nor in many other cases actually. The error is caused by two things: 1) This particular en.wiki article has a rather odd inline style: {| class="wikitable" style="height: 100px; width: 100%;" Now, that's crazy as shit and fortunately doesn't actually work (why would you want to make a table with lots of rows a 100px tall?). But mobile has this other thing: 2) MobileFrontend's mobile.styles module: #content table { overflow: auto; overflow-y: hidden; overflow-x: auto; word-break: normal; display: block; } Now (in particular "overflow-y: hidden;") that's also some interesting piece of art that also fortunately doesn't work. Both of these could (and should) be removed afaik as they do nothing. And then here's where it gets all wibbly wobbly... timey wimey... If you throw these two things (overflow-y: hidden; height: 100px) together on 1 table, it works and does exactly what you'd expect: Limit to a 100px and hide everything else with no scroll bar or overflow.
(btw, replying as dfc reported this on IRC and I pointed him to bugzilla, I was already debugging it)
The overflow hidden here isn't the real problem - it's the height. We set tables to display block - one of the various hacks in place to enable scrolling on large tables which are unreadable on certain browsers - see bug 36936) Even if it was overflow-y: auto this would make no difference - the real problem here is the inline style height of 200px. Remove that from the template and all should be fixed.
Is this something I should change? I am not sure what template to change and/or if regular users can edit templates. Thanks for your help. I am sorry I spammed the bugzilla installation with a template issue. I really appreciate the work you do on wikimedia. You guys/gals are right up there with the Debian developers in my opinion, and that is the highest praise I can give.
Sorry currently on vacation but I will get back to you as soon as I can - there is a template which is adding height 200px. This should just be removed from which ever template it is in..
Template seems to be fixed now!
