1312166 - JavaScript does not work for some buttons and images are not always loaded on page "https://www.computerbase.de/"

Status: RESOLVED WORKSFORME

(Firefox :: Untriaged, defect)

Description

[紫]

Attachment: Screenshot of Im Fokus area

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:52.0) Gecko/20100101 Firefox/52.0
Build ID: 20161020030211

Steps to reproduce:

Calling the page "https://www.computerbase.de/". The page loads, but there are problems with some areas:

"Notizen"
"Neue Tests"
"Leserartikel"
"Im Fokus"

Tested with
Firefox 52.0a1 auf Windows 7 64-bit (Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:52.0) Gecko/20100101 Firefox/52.0) - default browser
Firefox 49.0.2 auf Windows 10 32-bit

It currently works with 
Firefox 49.0.2 auf Windows 7 64-bit (Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:49.0) Gecko/20100101 Firefox/49.0)

A new profile has not solved the problem.


Actual results:

On the page there is a problem with the JavaScript execution of the next buttons. Furthermore the images are not always loaded (see screenshot). A refresh of the page is required to fix the problem with the images. but it does not solve the problem with the next buttons.


Expected results:

All images on the page must be loaded and all buttons must work without reloading of the page.

Comment 1

[紫]

Attachment: Scrrenshot of Leserartikel

Comment 2

[紫]

Attachment: Scrrenshot of Neue Tests

Comment 3

[紫]

Attachment: Screenshot of Im Fokus

Comment 4

[Alice0775 White]

Chrome 55.0.2883.11 works fine.
However, I can reproduce the problem on Windows10 home 64bit Nightly52.0a1 32bit and Microsoft Edge 38.14393.0.0....

Comment 5

[Alice0775 White]

And I can also reproduce the problem on IE11.

Comment 6

[Loic]

I have the issue with FF33, so it's probably more a website issue.

Comment 7

[Steffen Weber]

I'm working for ComputerBase. Thank you for the bug report. The bug should now be fixed!

What caused the bug: Due to the fact that our webserver does not yet support HTTP/2 Server Push (https://en.wikipedia.org/wiki/HTTP/2_Server_Push), we use the hack Critical CSS (https://www.smashingmagazine.com/2015/08/understanding-critical-css/) to inline parts of our CSS on the first homepage request. The CSS of our sliders is not considered to be critical and therefore fetched later using loadCSS (https://github.com/filamentgroup/loadCSS). The JavaScript code that initializes the sliders needs to know how many slides are visible initially (we use Responsive Design and initially do not want to fetch more slides/images than are visible initially). It therefore checks the wrapper's "offsetWidth" property which is 0 until loadCSS has finished. Our JavaScript was smart enough to check the "offsetWidth" again after loadCSS had finished. However, at least in Firefox and Edge the "load" event triggered by loadCSS does not seem to imply that the CSS has actually been applied to the document. Even waiting for the next animation frame using FastDOM (https://github.com/wilsonpage/fastdom) is not enough. We now wait an additional 100ms which seems to be enough to fix this issue. We'll properly fix this issue once nginx supports HTTP/2 Server Push.

Comment 8

[Loic]

I'm still seeing the issue with Nightly.

Comment 9

[Steffen Weber]

It's working for me in Edge 14, Firefox 49 and Firefox Nightly 52.0a1 (2016-10-23).

However, I've now increased the tolerance from 100 to 200 ms which may help other (faster/slower) systems.

Comment 10

[Alice0775 White]

I can also still reproduce the problem on Nightlty52.0a1[1] with new clean profile and Microsoft Edge 38.14393.0.0 after clear all browsing data and caches.

[1]https://hg.mozilla.org/mozilla-central/rev/60dd82380d43a2b681f50842238f829204486290
Mozilla/5.0 (Windows NT 10.0; WOW64; rv:52.0) Gecko/20100101 Firefox/52.0 ID:20161023030206

When mouse hover over [ > ] button, the rest of thumbnails will load.

Comment 11

[Steffen Weber]

Strange.

We are now using the loadCSS "add-on" onloadCSS (https://github.com/filamentgroup/loadCSS/blob/master/src/onloadCSS.js) instead of "onloadcssdefined". Could you please test again?

Comment 12

[Alice0775 White]

(In reply to Steffen Weber from comment #11)
> Strange.
> 
> We are now using the loadCSS "add-on" onloadCSS
> (https://github.com/filamentgroup/loadCSS/blob/master/src/onloadCSS.js)
> instead of "onloadcssdefined". Could you please test again?

Just now, 
I retested. It works fine on Nightly52.0a1 and Edge.

Comment 13

[紫]

I have retested 

on Windows 7 64-bit with
- Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:52.0) Gecko/20100101 Firefox/52.0
- Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:49.0) Gecko/20100101 Firefox/49.0

on Windows 10 32-bit with
- Mozilla/5.0 (Windows NT 10.0; rv:52.0) Gecko/20100101 Firefox/52.0
- Mozilla/5.0 (Windows NT 10.0; rv:49.0) Gecko/20100101 Firefox/49.0

and it works fine.

Comment 14

[Steffen Weber]

Cool, thank you! :)

Comment 15

[Alice0775 White]

According to comment #13, mark this as works for me.