www.businessinsider.com – Page flickers when loading articles

[softvision-oana-arbuzov]

URL: http://www.businessinsider.com/
Browser / Version: Firefox Mobile Nightly 55.0a1 (2017-04-23)
Operating System: Android 6.0.1
Problem type: Something else - I'll add details below

Steps to Reproduce

1. Navigate to: http://www.businessinsider.com/
2. Tap an article and observe behavior while the page is loading.

Expected Behavior:
The page does not flicker.

Actual Behavior:
The page keeps flickering.

Note:

1. Reproducible also on Firefox 52.0 Release
2. Not reproducible on Chrome (Mobile) 57.0.2987.132.
3. Video attached (as zip.file).

Watchers:
@softvision-sergiulogigan
@softvision-oana-arbuzov

sv; country: us
PageFlicker_Loading.zip

From webcompat.com with ❤️

[karlcow]

So I don't see any flickering at all. BUT I'm redirected to www.businessinsider.jp
trying https://www.businessinsider.jp/post-1652

@softvision-oana-arbuzov do you see the same thing on the Japanese Web site?

I also tested by requiring the United States Web site.
I tried with http://www.businessinsider.com/us-mexico-border-crossing-crime-2017-5
and experienced 3 flickers but then nothing, even on navigation and coming back.

This is an article page. A bit heavy.

It's not happening every time.

[softvision-oana-arbuzov]

I've retested the issue with VPN active, set to point to Japan, and it is not reproducible.
When setting the VPN to point to USA, the issue is reproducible, when viewing an article, by navigating back to main page, even when searching for an article.

[softvision-oana-arbuzov]

This issue is still reproducible.

Tested with:
Browser / Version: Firefox Nightly Mobile 59.0a1 (2017-12-19)
Operating System: Google Pixel (Android 8.0.0) - 1080 x 1920 pixels (~441 ppi pixel density), LG G5 (Android 7.0) - Resolution 1440 x 2560 pixels (~554 ppi pixel density)
VPN: not active.

[karlcow]

No Flickering on RDM.

[miketaylr]

This reproduces for me, also on a pixel. Exciting.

[karlcow]

yeah I can reproduce on Firefox Android too.
Console log

Navigated to http://www.businessinsider.com/trump-executive-order-family-separations-detention-asylum-whats-next-2018-6
Func Name: build               | Description: configure ads start time| Func Output: 103 ms src/scripts/providers/ads/dfp/dfp.js logger.js:53:8
Func Name: calculatePositions  | Description: update cached elements  | Func Output: 
Array [ {…} ]
 src/scripts/modules/postload.js logger.js:53:8
Func Name: checkPositionsAndLoad| Description: postload an element     | Func Output: 
Array [ "ad-27577" ]
 src/scripts/modules/postload.js logger.js:53:8
Func Name: checkPositionsAndLoad| Description: postload an element     | Func Output: 
Array [ "img-937299" ]
 src/scripts/modules/postload.js logger.js:53:8
Func Name: checkPositionsAndLoad| Description: postload an element     | Func Output: 
Array [ "ad-72809" ]
 src/scripts/modules/postload.js logger.js:53:8
Func Name: bind                | Description: postload module initialized| Func Output: 366ms src/scripts/modules/postload.js logger.js:53:8
Func Name: _logGAPageViewStartTime| Description: page view               | Func Output: 
Object { vertical: "politics", pageType: "post", author: "Michelle Mark", editor: "Bryan Logan", category: "Donald Trump|Executive Order|Zero tolerance|Family separation|Asylum", postURI: "trump-executive-order-family-separations-detention-asylum-whats-next-2018-6", postID: "5b2ad0ad1ae66220008b5584", datePublished: "2018-06-21", publisher: null, originalID: null, … }
 src/scripts/providers/tracking/ga/ga.js ga.js:352:8
Func Name: _logGAPageViewStartTime| Description: page view push time     | Func Output: 384 src/scripts/providers/tracking/ga/ga.js ga.js:353:8
Func Name: _loadGTM            | Description: call to loadGTM         | Func Output: 406 ms src/scripts/utils/trackingProvider.js logger.js:53:8
Func Name: init                | Description: sticky module initialized| Func Output: 456 ms src/scripts/modules/sticky.js logger.js:53:8
in segment tinypass.min.js line 1 > eval:5:3
segment freemium tinypass.min.js line 1 > eval:4:3
Func Name: checkPianoAccess    | Description: Piano access check, access denied| Func Output: 
Object { access_id: null, parent_access_id: null, granted: false, resource: null, user: null, expire_date: 1529559573 }
 src/scripts/providers/content/piano/piano.js logger.js:53:8
Func Name: _buildAdObject      | Description: Responsive Mapping      | Func Output: responsive region: Mobile Article Top, browser limits: 0,0 slot sizes: 320,50,320,150,300,150 src/scripts/providers/ads/dfp/dfp.js logger.js:53:8
Func Name: _buildAdObject      | Description: Responsive Mapping      | Func Output: responsive region: Mobile Sticky Lower, browser limits: 0,0 slot sizes: 320,50 src/scripts/providers/ads/dfp/dfp.js logger.js:53:8
Func Name: build               | Description: slot height unavailable | Func Output: null src/scripts/providers/ads/dfp/dfp.js logger.js:53:8
Func Name: build               | Description: slotRenderEnded event and slotId| Func Output: 
Array [ {…}, "ad-27577" ]
 src/scripts/providers/ads/dfp/dfp.js logger.js:53:8
Func Name: build               | Description: call to slotRenderEnded | Func Output: in 4932 ms src/scripts/providers/ads/dfp/dfp.js logger.js:53:8
Func Name: build               | Description: slot height unavailable | Func Output: null src/scripts/providers/ads/dfp/dfp.js logger.js:53:8
Func Name: build               | Description: slotRenderEnded event and slotId| Func Output: 
Array [ {…}, "ad-72809" ]
 src/scripts/providers/ads/dfp/dfp.js logger.js:53:8
Func Name: build               | Description: call to slotRenderEnded | Func Output: in 6578 ms src/scripts/providers/ads/dfp/dfp.js logger.js:53:8
An unbalanced tree was written using document.write() causing data from the network to be reparsed. For more information https://developer.mozilla.org/en/Optimizing_Your_Pages_for_Speculative_Parsing container.html:8
Func Name: build               | Description: slot onload, height unavailable| Func Output: null src/scripts/providers/ads/dfp/dfp.js logger.js:53:8
Func Name: build               | Description: slotRenderEnded to slotOnload| Func Output: 3604 ms src/scripts/providers/ads/dfp/dfp.js logger.js:53:8
Func Name: build               | Description: TOTAL start to finish   | Func Output: ad-72809 (Mobile Sticky Lower) in 10182 ms src/scripts/providers/ads/dfp/dfp.js logger.js:53:8
Func Name: build               | Description: debug                   | Func Output: null src/scripts/providers/ads/dfp/dfp.js logger.js:53:8
Func Name: _loadChartbeat      | Description: read _sf_startpt        | Func Output: 
Array [ 1529559571587 ]
 src/scripts/providers/tracking/chartbeat/chartbeat.js logger.js:53:8
Func Name: _loadChartbeat      | Description: set attributes          | Func Output: uid: 14447, domain: businessinsider.com, flickerControl: false, useCanonical: false src/scripts/providers/tracking/chartbeat/chartbeat.js logger.js:53:8
Func Name: _loadChartbeat      | Description: read configs            | Func Output: vertical: politics, author: Michelle Mark src/scripts/providers/tracking/chartbeat/chartbeat.js logger.js:53:8 

[karlcow]

There's a funny line in there…

Func Name: _loadChartbeat      | Description: set attributes          | Func Output: uid: 14447, domain: businessinsider.com, flickerControl: false, useCanonical: false src/scripts/providers/tracking/chartbeat/chartbeat.js

What is:

flickerControl: false

Ah… Maybe part of the answer.
http://support.chartbeat.com/docs/headlinetesting.html#asynchronousflicker

Alternatively we do have an asynchronous implementation option that still hides the document and prevents headline flicker:

@miketaylr I wonder if it's a misconfiguration of this library… or a a problem with the library itself.