1050581 - [B2G][Browser] apple.com - hi-res image (re)loading causes background image color flicker

Status: RESOLVED INVALID

(Web Compatibility :: Site Reports, defect)

Description

[pete siphantong [:Petes]]

Description:
When the user goes to Apple.com, the desktop page loads causing a flickering issue


Repro Steps:
1) Update a Flame to 20140807000201
2) Go to the browser 
3) Go to Apple.com


Actual:
flickering issue 


Expected:
no flickering issue


Environmental Variables:
Device: Flame 2.0
Build ID: 20140807000201
Gaia: 8cc28fd31905a0ea2b2e15d13e80a0eab2feb1ba
Gecko: 25980b5120b0
Version: 32.0 (2.0)
Firmware Version: v123
User Agent: Mozilla/5.0 (Mobile; rv:32.0) Gecko/32.0 Firefox/32.0


Repro frequency: 3/3, 100%
See attached: video clip, logcat, https://www.youtube.com/watch?v=CqZFEk-5W-Q

Comment 1

[pete siphantong [:Petes]]

Attachment: app.txt

Comment 2

[Jason Smith [:jsmith]]

Pete - Can you needinfo your lead & flag QAnalyst-Triage here?

Comment 3

[pete siphantong [:Petes]]

This issue does reproduce on the Flame 2.1 (319mb), Open_C 2.1, Flame 2.0(512mb), Open_C 2.0, Flame 1.4(319mb), Open_C 1.4, Base Image v122, and the Base Image v121-2 There is a flickering issues.

Flame 2.1 (319mb)

Environmental Variables:
Device: Flame Master
Build ID: 20140807040201
Gaia: 079c5f85875b0f2eb341ca9fd375f1b905ed7157
Gecko: afcb3af79d09
Version: 34.0a1 (Master)
Firmware Version: v123
User Agent: Mozilla/5.0 (Mobile; rv:34.0) Gecko/34.0 Firefox/34.0

Open_C 2.1

Environmental Variables:
Device: Open_C Master
Build ID: 20140807084340
Gaia: 54c3c19d439f7dbafda5c6cc3b4850b545a068ba
Gecko: 2f198e81ed98
Version: 34.0a1 (Master)
Firmware Version: P821A10V1.0.0B06_LOG_DL
User Agent: Mozilla/5.0 (Mobile; rv:34.0) Gecko/34.0 Firefox/34.0

Flame 2.0(512mb)

Environmental Variables:
Device: Flame 2.0
Build ID: 20140807000201
Gaia: 8cc28fd31905a0ea2b2e15d13e80a0eab2feb1ba
Gecko: 25980b5120b0
Version: 32.0 (2.0)
Firmware Version: v123
User Agent: Mozilla/5.0 (Mobile; rv:32.0) Gecko/32.0 Firefox/32.0

Open_C 2.0

Environmental Variables:
Device: Open_C 2.0
Build ID: 20140807000201
Gaia: 8cc28fd31905a0ea2b2e15d13e80a0eab2feb1ba
Gecko: 25980b5120b0
Version: 32.0 (2.0)
Firmware Version: P821A10V1.0.0B06_LOG_DL
User Agent: Mozilla/5.0 (Mobile; rv:32.0) Gecko/32.0 Firefox/32.0

Flame 1.4(319MB)

Environmental Variables:
Device: Flame 1.4
Build ID: 20140806183051
Gaia: e9dce1f60f729e228810f751417681b5ff937b6b
Gecko: 89a8a24a8b1b
Version: 30.0 (1.4)
Firmware Version: v123
User Agent: Mozilla/5.0 (Mobile; rv:30.0) Gecko/30.0 Firefox/30.0

Open_C 1.4

Environmental Variables:
Device: Open_C 1.4
Build ID: 20140804000203
Gaia: 01c7740a20d9863c3a7bf3dbecca7a83e07be695
Gecko: 71ee24107a0a
Version: 30.0 (1.4)
Firmware Version: P821A10V1.0.0B06_LOG_DL
User Agent: Mozilla/5.0 (Mobile; rv:30.0) Gecko/30.0 Firefox/30.0

Base Image
v122

Environmental Variables:
Device: Flame 1.3 (319MB)
Build ID: 20140616171114
Gaia: e1b7152715072d27e0880cdc6b637f82fa42bf4e
Gecko: e181a36ebafaa24e5390db9f597313406edfc794
Version: 28.0 (1.3)
Firmware Version: v122
User Agent: Mozilla/5.0 (Mobile; rv:28.0) Gecko/28.0 Firefox/28.0

Base Image
v121-2

Environmental Variables:
Device: Flame 1.3 (319MB)
Build ID: 20140610200025
Gaia: e106a3f4a14eb8d4e10348efac7ae6dea2c24657
Gecko: b637b0677e15318dcce703f0358b397e09b018af
Version: 28.0 (1.3)
Firmware Version: v121-2
User Agent: Mozilla/5.0 (Mobile; rv:28.0) Gecko/28.0 Firefox/28.0
----------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------

This issue does not reproduce on the Buri 2.1, Buri 2.0, and the Buri 1.4. There is no flickering issue

Buri 2.1 

Environmental Variables:
Device: Buri Master
BuildID: 20140807040201
Gaia: 079c5f85875b0f2eb341ca9fd375f1b905ed7157
Gecko: afcb3af79d09
Version: 34.0a1 (2.1)
Firmware: v1.2device.cfg
User Agent: Mozilla/5.0 (Mobile; rv:33.0) Gecko/33.0 Firefox/33

Buri 2.0

Enviromental Variables:
Device: Buri 2.0
BuildID: 20140807063003
Gaia: 9d681c6a3b69af2d76e7e00c31bc57e0c3efb6b9
Gecko: ca7386df2e91
Version: 32.0 (2.0)
Firmware: v1.2device.cfg
User Agent: Mozilla/5.0 (Mobile; rv:32.0) Gecko/32.0 Firefox/32.0

Buri 1.4

Enviromental Variables:
Device: Buri 1.4
BuildID: 20140806183051
Gaia: e9dce1f60f729e228810f751417681b5ff937b6b
Gecko: 89a8a24a8b1b
Version: 30.0 (1.4)
Firmware: v1.2device.cfg
User Agent: Mozilla/5.0 (Mobile; rv:30.0) Gecko/30.0 Firefox/30.0

Comment 4

[KTucker [:KTucker][Inactive 3/4/2016]]

I don't think this is a browser issue. Also, can you check the Open C base.

Comment 5

[pete siphantong [:Petes]]

This issue also reproduces on the Open_C base, flickering issues.

Environmental Variables:
Device: Open_C 1.3
Build ID: 20140527120838
Gaia: Unknown Git commit; build date shown here.
Gecko: Unknown
Version: 28.0 (1.3)
Firmware Version: P821A10V1.0.0B06_LOG_DL
User Agent: Mozilla/5.0 (Mobile; rv:28.0) Gecko/28.0 Firefox/28.0

Comment 6

[KTucker [:KTucker][Inactive 3/4/2016]]

Appears to be related to the resolution of the Flame and Open C devices.

Comment 7

[KTucker [:KTucker][Inactive 3/4/2016]]

Since it appears to be a tech evangelism issue not nominating to block.

Comment 8

[Karl Dubost💡 :karlcow]

Changing the URL
Video is at https://www.youtube.com/watch?v=CqZFEk-5W-Q

Comment 9

[Karl Dubost💡 :karlcow]

First of all. Apple never had a Mobile Web site, so it's normal we receive the desktop site.

On iPod touch iOS Safari, the Desktop site is displayed too.
On Firefox Android, I have no flickering issues.
On Firefox OS (Flame), I have a flickering issue for 2seconds and then it goes away and displays the desktop site.
On Firefox OS (ZTE), no flickering at all.

Comment 10

[Karl Dubost💡 :karlcow]

The flickering on the flame seems to be related to the loading of resources.
I can't reproduce on the simulator too. 

It's difficult to contact Apple about this without understanding what creates this issue. Repainting but why?

I can reproduce on the subdomains too http://www.apple.com/fr/ and http://www.apple.com/jp/

ah interesting

There are 3 versions of images for multiple images
For example: 

<a href="/your-verse/striking-a-new-chord/">
    <img class="large" width="980" height="108" alt="What will your verse be?" src="http://images.apple.com/home/images/your_verse_title_large.png"></img>
    <img class="medium" width="980" height="88" alt="What will your verse be?" src="http://images.apple.com/home/images/your_verse_title_medium.png"></img>
    <img class="small" width="980" height="76" alt="What will your verse be?" src="http://images.apple.com/home/images/your_verse_title_small.png"></img>

</a>

so I guess the page is being repainted a few times. All images are downloaded.

The JavaScript scripts have multiple instances of useragent sniffing too.

The home page is 8 Mo.

Comment 11

[Karl Dubost💡 :karlcow]

This seems easier to reproduce on http://www.apple.com/jp/ on the Flame.
I still haven't found what is triggering the flickering. The type of flickering is not exactly the same in between the 3 sites. Aka the observable sequence of flickering.

On Apple.com/jp and apple.com/fr there is a browser detection script
http://images.apple.com/global/scripts/browserdetect.js
The scripts in between main sites and /fr/ and /jp/ are slightly different. Another surprise.
The French version seems to have the biggest occurrences of 'useragent' in many scripts.
home.built.js is a script with user agent and feature sniffing, that creates the final JS that will be used for the Web site: s-code.built.js 



Given the tests above:
https://developer.mozilla.org/en-US/Firefox_OS/Developer_phone_guide/Phone_specs#Device_specifications
The issue reproduces on Flame and Open C, NOT on Buri.

Buri:   320 x 480 PX=1
Flame:  854 × 480 PX=1.5
Open C: 800 x 400 PX=1.5

testing of device-pixel-ratio is used at two places:
in head.built.js and home.built.js

I have the feeling that the page is being prepared before being displayed.
There is at a point a variable saying:
       <section style="display: none;" id="hero-0" etc.

it's looping a lot of times to create the markup of this page.

Comment 12

[Hallvord R. M. Steen [:hallvors]]

I've noticed similar flickering issues on other sites. Unfortunately it's one of those issues that's pretty hard to debug on device..

Comment 13

[Mike Taylor [:miketaylr]]

In billboard.css,

#billboard .stickers { 
  background-size:1500px auto; 
  left:50%; 
  margin-left:-720px; 
  width:1440px; 
  background-color:#000; 
}

<section style="background-size: 1500px 1180px; background-image: url(http://images.apple.com/jp/home/images/stickers_hero_2x.jpg);" id="hero" class="hero stickers">

So the black background (#000) is displayed, then some JS from http://images.apple.com/global/ac_retina/ac_retina.js calculates how big to display the laptop image with a white background on top of that. That's where the flicker comes from. 

Some relevant excerpts:

AC.Retina.imageComponentRegistry.addComponent("background-image", {
    preload: true
}, function(b, c) {
    var a = AC.Element.getStyle(b, "background-image");
    return b.tagName.toLowerCase() !== "img" && a && !!a.match(/^url\(([^\)]+)\)$/i);
}, "_base", {
    src: function ac_src() {
        return AC.Retina.Image.removeCSSURLSyntax(AC.Element.getStyle(this.element(), "background-image"));
    },
    replace: function ac_replace() {
        var a = AC.Element.getStyle(this.element(), "background-size");
        if (!a || !!a.match("auto")) {
            AC.Element.setStyle(this.element(), "background-size:" + this.width() + "px " + this.height() + "px;");
        }
        AC.Element.setStyle(this.element(), "background-image:url(" + this.hiresSrc() + ");");
    },
    blacklist: new AC.Retina.Blacklist([ AC.Retina.Blacklist.Qualifiers.DPRLessThanMinAndNotSVG ])
});

The blacklist checks for a minimum DPR of 1.5 (AC.Retina._minDPR = 1.5;)--this explains why it doesn't reproduce on Buri. It's not trying to replace the image with a hires image. This even reproduces on desktop for me (in Nightly and in Chrome). If I change AC.Retina._minDPR to something crazy like 20, no more flicker.

I don't think this is a TE issue, perhaps it could be considered a graphics issue as Chrome and Safari don't flickr on apple.com the same way that Firefox desktop does. Chrome does flickr the same as Firefox on apple.com/jp/, though.

Comment 14

[Karl Dubost💡 :karlcow]

I wonder if it's similar to Bug 1013224

Comment 15

[Seth Fowler [:seth] [:s2h]]

It's conceivable that it is similar, yes.

Does setting "image.high_quality_downscaling.enabled" to false in about:config fix the problem?

If so, then this bug should depend on bug 977459.

Comment 16

[Karl Dubost💡 :karlcow]

seth, the bug is related to Firefox OS. 

I added to /system/b2g/defaults/pref/user.js
pref("image.high_quality_downscaling.enabled", false);
Restarted.

The flickering still exists.

Comment 17

[Mike Taylor [:miketaylr]]

> seth, the bug is related to Firefox OS. 

It also reproduces for me on my retina MBP and HTC One. Anything with DPR > 1.5.

Comment 18

[Aaron Train [:aaronmt]]

I noticed apple.com just launched a mobile site recently. Looking to close out some bugs. Is this still valid?

Comment 19

[Mike Taylor [:miketaylr]]

I can't reproduce anymore on my Flame or Android devices. Going to resolve as INVALID due to the redesign.