Make the site stable in all browsers

[jpvelez]

Here are the two reports we have so far:

From Stella Stevens at CNT:

• On Chrome (Windows, version ?): the images are not loading correctly. (I suspect this is the "line flickering" issue Ed has previously documented. @edwardoser is going to take a look and confirm.
• On IE (Windows, version ?): it seemed jittery and jumpy the first couple of transitions (when the map first comes in)

From Lia Bosma:

• On IE (Windows, version 10): the map isn't loading. Screenshot:
  https://www.dropbox.com/s/a8vcj09usrgmf0l/Screenshot%202014-04-04%2014.44.14.png

From Ray Kilovolt Koltys on Facebook:

• On Safari (Mac, version ?):
• On Firefox (Mac, version ?): "I love the idea and I support and use transit when I can, but the vision.transitfuture.org website is very flaky on both Safari and Firefox, on a pretty up-to-date Mac with 8GB of RAM over a 100MB optical line. The continuous page format with animations demands some pretty serious browser performance and memory to scroll smoothly, and I don't think you folks did yourselves any favors by going with it. Sorry to be a Debby Downer."

The plan

It looks like IE is having the biggest problem. @mapmeld , let me know what you think of the wisdom/feasibility of this plan:

1. Make a non-interactive version of the site for IE. Doesn't load map stuff at all, just background pics, so its fast. I can figure out what screenshot dimensions should be, and generate them.
2. Get the site to load and be smooth in IE.
3. Get the site to load and be smooth in Windows Chrome and Mac Safari.

[mapmeld]

I suggested that we work on the first option. There is a mobile version
with images that kicks in if we see iPhone or Android. We can do the same
thing for IE. Especially since it sounds like new IE has the same problems
On Apr 4, 2014 3:55 PM, "Juan-Pablo Velez" [email protected] wrote:

Here are the two reports we have so far:

From Stella Stevens at CNT:

• On Chrome (Windows, version ?): the images are not loading
  correctly. (I suspect this is the "line flickering" issue Ed has previously
  documented. @edwardoser https://github.com/edwardoser is going to
  take a look and confirm.
• On IE (Windows, version ?): it seemed jittery and jumpy the first
  couple of transitions (when the map first comes in)

From Lia Bosma:

• On IE (Windows, version 10): the map isn't loading. Screenshot:
  https://www.dropbox.com/s/a8vcj09usrgmf0l/Screenshot%202014-04-04%2014.44.14.png

From Ray Kilovolt Koltys on Facebook:

• On Safari (Mac, version ?):
• On Firefox (Mac, version ?): "I love the idea and I support and use
  transit when I can, but the vision.transitfuture.org website is very
  flaky on both Safari and Firefox, on a pretty up-to-date Mac with 8GB of
  RAM over a 100MB optical line. The continuous page format with animations
  demands some pretty serious browser performance and memory to scroll
  smoothly, and I don't think you folks did yourselves any favors by going
  with it. Sorry to be a Debby Downer."

The plan

It looks like IE is having the biggest problem. @mapmeldhttps://github.com/mapmeld, let me know what you think of the wisdom/feasibility of this plan:

1. Make a non-interactive version of the site for IE. Doesn't load map
   stuff at all, just background pics, so its fast. I can figure out what
   screenshot dimensions should be, and generate them.
2. Get the site to load and be smooth in IE.
3. Get the site to load and be smooth in Windows Chrome and Mac Safari.

Reply to this email directly or view it on GitHubhttps://github.com//issues/129
.

[jpvelez]

@mapmeld do you have access to IE 9 and 10 for developing?

[mapmeld]

I think I have IE10 VM with me
On Apr 4, 2014 3:59 PM, "Juan-Pablo Velez" [email protected] wrote:

@mapmeld https://github.com/mapmeld do you have access to IE 9 and 10
for developing?

Reply to this email directly or view it on GitHubhttps://github.com//issues/129#issuecomment-39605176
.

[mapmeld]

Fix 1: if browser_easy = true (IE, Windows+Firefox) then we use dynamic map with map.setCenter instead of map.easeTo. browser_easy can be expanded as needed

[mapmeld]

Fix 2: IE can't do $(document.body).scrollTop(). Just tested IE10 with $(window).scrollTop(). Success.

[mapmeld]

Fix 3: adjusted browser_easy for Firefox+Mac, IE, and Safari as requested

[mapmeld]

Fix 4: map intro and outro are easier on browser_easy. And Chrome says it's 'Safari', but it is not browser_easy (oops!)

[edwardoser]

Whatever you're doing boys, do it quick, I just got a note from upworthy.

On Sat, Apr 5, 2014 at 10:15 AM, Nick Doiron [email protected]:

Fix 4: map intro and outro are easier on browser_easy. And Chrome says
it's 'Safari', but it is not browser_easy (oops!)

Reply to this email directly or view it on GitHubhttps://github.com//issues/129#issuecomment-39641074
.

[mapmeld]

I think we're in a good position for it. If traffic starts affecting the map, we can increase the number of Heroku dynos. Memcache can support us adding connections.

[jpvelez]

Lia, Windows
IE11: Map slides in. Working great.
Firefox 13: Map slides in. Working great.
Chrome 33: Map slides in. Working great.

Ed, Windows
IE8: no working, stuck on load screen.
Firefox 27: Map slides in. Working great.
Chrome 33: Map slides in. Working great.

Juan, OSX
Chrome 33: Map slides in. Works great. No lines flickering.
Firefox 27: Map FLASHES in. The "switch" to the map takes a while, so if you're scrolling normally you're already on the next map "view", so the map goes to Gold Line even though the text is still at "meet the lines". When you hit "CHICAGO", the map figures out it's supposed to showing all the lines, so it "snaps" back there for a second before going back down to Gold Line for the "Gold Line" buffer post.
Safari, 7: Map FLASHES in. Same thing happening.

Bo Peng, OSX
Chrome 33: Map slides in. Works great.
Firefox 28: Map FLASHES in. Works great.
Safari 7: Map FLASHES in. Works great.