www.wetteronline.de - design is broken

[webcompat-bot]

URL: https://www.wetteronline.de/wetter/stuttgart

Browser / Version: Firefox 60.0
Operating System: Windows 10
Tested Another Browser: Yes

Problem type: Design is broken
Description: The '14-Tage-Wetter' is not displayed.
Steps to Reproduce:
layout.css.servo.enabled: true

It is ok with
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:58.0) Gecko/20100101 Firefox/58.0

From webcompat.com with ❤️

[softvision-oana-arbuzov]

I was able to reproduce the issue.

Affected area:

<div id="longterm_teaser_wrapper" class="teaser_block">
	<h2 class="headline icon trendchart">
		<a href="/14-tage-wetter">14-Tage-Wetter</a>
	</h2>
	<ul id="longterm_teaser" class="image_tab">
		<li id="longtermtab-10738">
			<a href="/wettertrend/stuttgart" class="image_tab_textlink" title="14-Tage-Wetter Stuttgart">
	Stuttgart
  </a>
			<a href="/wettertrend/stuttgart" title="14-Tage-Wetter Stuttgart">
				<img data-lazy="/?diagram=true&amp;gid=10738&amp;pid=p_city_local&amp;timestamp=&amp;trendchart=true" alt="14 Tage Wetter Temperatur und Niederschlag Stuttgart" width="298" height="228">
				</a>
				<ul class="datestamp">
					<li>Di, 30.01.</li>
					<li>Mi, 31.01.</li>
					<li>Do, 01.02.</li>
					<li>Fr, 02.02.</li>
					<li>Sa, 03.02.</li>
					<li>So, 04.02.</li>
					<li>Mo, 05.02.</li>
					<li>Di, 06.02.</li>
					<li>Mi, 07.02.</li>
					<li>Do, 08.02.</li>
					<li>Fr, 09.02.</li>
					<li>Sa, 10.02.</li>
					<li>So, 11.02.</li>
					<li>Mo, 12.02.</li>
				</ul>
			</li>
		</ul>
	</div>

Nightly:

<img data-lazy="/?diagram=true&amp;gid=10738&amp;pid=p_city_local&amp;timestamp=&amp;trendchart=true" alt="14 Tage Wetter Temperatur und Niederschlag Stuttgart" width="298" height="228">

Chrome

<img data-lazy="/?diagram=true&amp;gid=10738&amp;pid=p_city_local&amp;timestamp=&amp;trendchart=true" alt="14 Tage Wetter Temperatur und Niederschlag Stuttgart" width="298" height="228" src="/?diagram=true&amp;gid=10738&amp;pid=p_city_local&amp;timestamp=&amp;trendchart=true">

Tested with:
Browser / Version: Firefox Nightly 60.0a1 (2018-01-29)
Operating System: Windows 10 Pro

Moving to Needsdiagnosis for further investigation.

[softvision-oana-arbuzov]

After adding src="/?diagram=true&gid=10738&pid=p_city_local&timestamp=&trendchart=true" to the

<img data-lazy="/?diagram=true&amp;gid=10738&amp;pid=p_city_local&amp;timestamp=&amp;trendchart=true" alt="14 Tage Wetter Temperatur und Niederschlag Stuttgart" width="298" height="228"> 

and un-cheking the visibility

#longterm_teaser li img {
    visibility: hidden;
}

the graph is displayed on Nightly also.

@karlcow could you check please?

[karlcow]

In https://st.wetteronline.de/dr/1.0.817/js/wetteronline.js

WO.eventifyLongtermTeaser = function() {…}

in this function, there is a

                    .each(function(e) {
                        e.addEvent("click", function(e) {
                            e.target.getParent().hasClass("active") ||
                                (e && e.stop(), i.removeClass(
                                    "active"
                                ), this.getParent().addClass(
                                    "active"
                                ), this.getSiblings("a img").each(function(e) {
                                    e.set("src", e.get("data-lazy"));
                                }), WO.localStorageUseable &&
                                    (localStorage.longtermTab = i.indexOf(
                                        this.getParent()
                                    )), WO.updateIVWCounter());
                        });

which should take the content of the data-lazy section to create an src.
This is not happening. I wonder why.

[karlcow]

@twisniewski Do you know why?
I tried a couple of breakpoints but it doesn't seem to break every time. And sometimes it seems even the breakpoints disappear.

[karlcow]

@wisniewskit And fixing my ping.

[wisniewskit]

It fails here in that script:

  if (WO.initSearch(), WO.initLoginButtons(), WO.adjustGeoBreadCrumbElementWidth(), WO.initGeoNavigation(), WO.initGeonavigationBox(), WO.initContentNavigation(), WO.user.loggedin) {
    /* snip for brevity */
  }(void 0 === s || s && s != i) && (WO.FavLoc = new FavoriteLocations, $("longterm_teaser_wrapper") && WO.eventifyLongtermTeaser()),

In Chrome, it gets to the WO.eventifyLongtermTeaser() call, but in Firefox it only gets to WO.initGeoNavigation(), fails, and doesn't run the rest of that code. It fails right away in initGeoNavigation:

WO.initGeoNavigation = function() {
    var e = $$("li.crumb");
    e.getChildren("ul").flatten();

Oddly, there is no "flatten" method in Firefox, but there is one in Chrome. Chrome gets the flatten method defined above in the same file using MooTools:

Array.implement({
  /* snip */
  flatten: function() {
      for (var e = [], t = 0, n = this.length; t < n; t++) {
          var i = typeOf(this[t]);
          "null" != i && (e = e.concat("array" == i || "collection" == i || "arguments" == i || instanceOf(this[t], Array) ? Array.flatten(this[t]) : this[t]))
      }
      return e
  },

Firefox also calls that same code, but it doesn't actually end up adding a flatten method for some reason. The code it calls is here, and I'm unclear as to why it would break:

    i && (i = ["hasOwnProperty", "valueOf", "isPrototypeOf", "propertyIsEnumerable", "toLocaleString", "toString", "constructor"]), n.prototype.overloadSetter = function(e) {
        var t = this;
        return function(n, r) {
            if (null == n) return this;
            if (e || "string" != typeof n) {
                for (var o in n) t.call(this, o, n[o]);
                if (i)
                    for (var s = i.length; s--;) o = i[s], n.hasOwnProperty(o) && t.call(this, o, n[o])
            } else t.call(this, n, r);
            return this
        }
    }

I first tried to see if just updating to the latest MooTools version in their script would work, but it doesn't, so this is a potentially widespread issue. It struck me as odd that MooTools would be that broken, so I checked in Firefox 58 and the page does load properly.

Well, time for mozregression. And funny enough, things broke when Firefox recently implemented proper support for flatten and flatMap in bz1421398, which seems slated to be officially released in Firefox 59, so I've filed bz1443630 while I try to figure out why it's breaking more precisely.

Update: it's breakage similar to what happened in bz1075059. We'll have to decide what to do in the opened bug, so I'll close this as a dupe for now.