Showing funny icons on mobile devices

[ghost]

We are seeing funny icons in the following maps when viewing them on iphone and android phone http://maps.calgary.ca/StreetSweeping http://maps.calgary.ca/spring There are a hand icon in front of the title, and a burger icon in front of the swiping instruction. Also the close button in pop up windows is showing as a golf (or boat?) icon. It's not very consistent. May take a few times of refreshing before you see them. Confirmed on 3 devices.

[glazou]

Sounds like the web font that is used to create those icons did not load properly.

I loaded the app over wifi like 20 times on Nexus 5 / Android 6 / Chrome and can't reproduce.

The font is distributed from the following folder: http://thecityofcalgary.maps.arcgis.com/apps/MapSeries/resources/lib/bootstrap/fonts/ There is multiple formats, recent smartphone would use the .woff2 http://thecityofcalgary.maps.arcgis.com/apps/MapSeries/resources/lib/bootstrap/fonts/glyphicons-halflings-regular.woff2

Can you reproduce over wifi or only in 3/4G?

Font loading should not be an issue, I think you will have to plug your phone to a computer to look at the network calls and see if a file fail to load. That may be an issue with your web server.

See documentation https://developer.chrome.com/devtools/docs/remote-debugging http://moduscreate.com/enable-remote-web-inspector-in-ios-6/

[ghost]

I am using iPhone 6. I can see the funny icons in both Chrome and Safari, wifi and 3G. I was told maps are fine on a Samsung device. So the issue may be mostly related to iPhone? Here is the screenshots I don’t have a Mac, so can’t really troubleshoot. Thank you for your quick response.

Thanks

Michael Su ISC: Protected

From: glazou [mailto:notifications@github.com] Sent: Thursday, April 07, 2016 9:31 AM To: Esri/map-series-storytelling-template-js Cc: Su, Michael Subject: Re: [Esri/map-series-storytelling-template-js] Showing funny icons on mobile devices (#22)

Sounds like the web font that is used to create those icons did not load properly.

I loaded the app over wifi like 20 times on Nexus 5 / Android 6 / Chrome and can't reproduce.

The font is distributed from the following folder: http://thecityofcalgary.maps.arcgis.com/apps/MapSeries/resources/lib/bootstrap/fonts/https://urldefense.proofpoint.com/v2/url?u=http-3A__thecityofcalgary.maps.arcgis.com_apps_MapSeries_resources_lib_bootstrap_fonts_&d=CwMCaQ&c=jdm1Hby_BzoqwoYzPsUCHSCnNps9LuidNkyKDuvdq3M&r=bnpiKulitf5__yGIBZT2hpyPhDnwBXUeBp1eYVtJLs0&m=eTR90LOnTKL4MdEniHdnqreaO_ILdqEMxyJSD7VWdzk&s=_OqNbKz-eL13Rvds3o8cz_J6p17h1Xyz8lpu14eh-pc&e= There is multiple formats, recent smartphone would use the .woff2 http://thecityofcalgary.maps.arcgis.com/apps/MapSeries/resources/lib/bootstrap/fonts/glyphicons-halflings-regular.woff2https://urldefense.proofpoint.com/v2/url?u=http-3A__thecityofcalgary.maps.arcgis.com_apps_MapSeries_resources_lib_bootstrap_fonts_glyphicons-2Dhalflings-2Dregular.woff2&d=CwMCaQ&c=jdm1Hby_BzoqwoYzPsUCHSCnNps9LuidNkyKDuvdq3M&r=bnpiKulitf5__yGIBZT2hpyPhDnwBXUeBp1eYVtJLs0&m=eTR90LOnTKL4MdEniHdnqreaO_ILdqEMxyJSD7VWdzk&s=9UNL2sMQXoG2q8BFasj19K0yh6fgO7MNGKlVw2QZIs4&e=

Can you reproduce over wifi or only in 3/4G?

Font loading should not be an issue, I think you will have to plug your phone to a computer to look at the network calls and see if a file fail to load. That may be an issue with your web server.

See documentation https://developer.chrome.com/devtools/docs/remote-debugginghttps://urldefense.proofpoint.com/v2/url?u=https-3A__developer.chrome.com_devtools_docs_remote-2Ddebugging&d=CwMCaQ&c=jdm1Hby_BzoqwoYzPsUCHSCnNps9LuidNkyKDuvdq3M&r=bnpiKulitf5__yGIBZT2hpyPhDnwBXUeBp1eYVtJLs0&m=eTR90LOnTKL4MdEniHdnqreaO_ILdqEMxyJSD7VWdzk&s=CRlCRMCssCsS7BW8R2vdlxqvmOxeKPdoeyczOv97Prc&e= http://moduscreate.com/enable-remote-web-inspector-in-ios-6/https://urldefense.proofpoint.com/v2/url?u=http-3A__moduscreate.com_enable-2Dremote-2Dweb-2Dinspector-2Din-2Dios-2D6_&d=CwMCaQ&c=jdm1Hby_BzoqwoYzPsUCHSCnNps9LuidNkyKDuvdq3M&r=bnpiKulitf5__yGIBZT2hpyPhDnwBXUeBp1eYVtJLs0&m=eTR90LOnTKL4MdEniHdnqreaO_ILdqEMxyJSD7VWdzk&s=d2CSPZc_lnhjjmYTI6bJQdTNv7rh-dAh9JBMLqSSbFA&e=

— You are receiving this because you authored the thread. Reply to this email directly or view it on GitHubhttps://urldefense.proofpoint.com/v2/url?u=https-3A__github.com_Esri_map-2Dseries-2Dstorytelling-2Dtemplate-2Djs_issues_22-23issuecomment-2D206954100&d=CwMCaQ&c=jdm1Hby_BzoqwoYzPsUCHSCnNps9LuidNkyKDuvdq3M&r=bnpiKulitf5__yGIBZT2hpyPhDnwBXUeBp1eYVtJLs0&m=eTR90LOnTKL4MdEniHdnqreaO_ILdqEMxyJSD7VWdzk&s=G_mNF9ZJJQvVSmyxld-Sr3heN2azxEOb1YmPnTsiJMw&e=

---

NOTICE - This communication is intended ONLY for the use of the person or entity named above and may contain information that is confidential or legally privileged. If you are not the intended recipient named above or a person responsible for delivering messages or communications to the intended recipient, YOU ARE HEREBY NOTIFIED that any use, distribution, or copying of this communication or any of the information contained in it is strictly prohibited. If you have received this communication in error, please notify us immediately by telephone and then destroy or delete this communication, or return it to us by mail if requested by us. The City of Calgary thanks you for your attention and co-operation.

[ghost]

Turns out it is our own code that cause the issue. Close this now.

[oevans]

OK, thx for the update @darkbluemsu

[carmat]

Any chance you could enlighten us as to the code issue you had?

Having a similar issue whereby icon-font glyphs display fin over a WiFi network, but horribly on a 4G network connection. When inspecting the CSS in each case, the content value changes, again depending on the connection type.

Wifi

4G

Anyone got any guidance?