After logging into FMD site (https://find.firefox.com), the FMD site experiences a massive amount of flickering while the site loads

[pdehaan]

via https://bugzilla.mozilla.org/show_bug.cgi?id=1043700

---

Build Information

Device: Flame
Gaia 29266e18c35f4e72e35f1bba0e34f2fb6b995cc3
Gecko https://hg.mozilla.org/releases/mozilla-b2g32_v2_0/rev/178fe2efc41d
BuildID 20140724000201
Version 32.0

Description

Loading of the FMD site (find.firefox.com) after logging in experiences massive flickering until the site is fully loaded.

Steps to Reproduce

1. Go to find.firefox.com
2. Login with an existing FxAccount paired to a device with FMD enabled

Expected Results

Site should have a smooth loading sequence.

Actual Results

Site experiences a massive amount of flickering during loading.

Other Notes

Kate can't reproduce this on her device, but I've seen this consistently on my account.

Reproduction Frequency: 100% for my account only

[pdehaan]

Video here: https://docs.google.com/file/d/0ByOpueKMbyhuVmhhcnlpNjFreDA/edit

Or my beautifully stabilized GIF masterpiece:

[pdehaan]

@nchapman Not sure if this is the best/cheapest/fastest solution for now, but we can possibly just move the chunky hidpi background image from the main.scss stylesheet and toss it into the _desktop.scss stylesheet, like a so:

$ git diff app/styles/main.scss
diff --git a/static/app/styles/main.scss b/static/app/styles/main.scss
index 672dc50..efb9d60 100644
--- a/static/app/styles/main.scss
+++ b/static/app/styles/main.scss
@@ -109,7 +109,6 @@ a {

   #map {
     background: transparent no-repeat 50% 50%, linear-gradient(180deg, $header-background-color, #fff);
-    @include hidpi-background-image(bg, 2000px 950px);
     position: relative;

     .locating {

and

$ git diff app/styles/_desktop.scss
diff --git a/static/app/styles/_desktop.scss b/static/app/styles/_desktop.scss
index 907f0cb..1675994 100644
--- a/static/app/styles/_desktop.scss
+++ b/static/app/styles/_desktop.scss
@@ -3,6 +3,10 @@
     padding-bottom: 0; // remove padding on the bottom for footer
     padding-top: $header-height + $footer-height--desktop;

+    #map {
+      @include hidpi-background-image(bg, 2000px 950px);
+    }
+
     footer {
       background: $footer-background-color--desktop;
       bottom: auto;

[nchapman]

Or my beautifully stabilized GIF masterpiece:

That is an amazing gif. Well done!

Not sure if this is the best/cheapest/fastest solution for now, but we can possibly just move the chunky hidpi background image from the main.scss stylesheet and toss it into the _desktop.scss stylesheet

Totally agree! We'll add back a proper mobile friendly background when we have a visual design resource again.