Browser testing

[versatilehuman]

A place to document bugs...

• IE/Edge SVG clickability issue
• Mobile -- No POIs show in search when whole map is shown (see details below)
• Safari 8 SVG clickability
• Selectize menu not opening up / iOS on iPhone
• Map/list toggle doesn’t function in Edge13/14 (Windows 10) and IE11 (Windows 7,8.1,10)
• Click on selectize menu is also activating search result in Edge13/14 (Windows 10) and IE11 (Windows 7,8.1,10)
• POI info panel is showing up over selectize menu IE11 (Windows 7,8.1,10)
• Search box / button styling issues on IE11 (Windows 7,8.1,10)
• Map/list toggle functional, but not moving iOS 9.0
• Solid color background rendered over basemap and some trails/pois Android 6.0.1/ZTE ZMax Pro, Galaxy J7/Android 6.0.1 .
• Pop-up flashing issue IE11 (Windows 7,8.1, 10) & Edge13/14 (Windows 10)
• Safari 8 repeatedly asks for location permission after answer given

Won't fix?

• Doesn't load in iOS 8.x
• Android Browser 4.x clips activity svgs and search icon is missing on map view.
• Samsung Note 10.1/Android 4.1.2 "Internet" App, not loading.

[shua123]

@versatilehuman comments from #119:

Map definitely moves better after search. Will need to think about what to load when.
Hanging up:
iPhone 4s w/ iOS 9.3.5 on Safari
Moto G w/ Android 5.1 on Firefox 49.0.2
Loads list:
Moto G w/ Android 5.1 on Chrome 54.0.2840.85
Once I switch to map after the hang up, I get this on both phones:

[shua123]

Several issues going on with the hanging up examples. The issue has to do with using the geolocation to calculate distances and order the results by distance.

At least for the Firefox example, it appears to be affected by this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1283563 where Firefox fires both success and error responses. I've increased the timeout setting for the geolocation as recommended.

There also is an issue with Firefox (and maybe other non-Chrome browsers) where a non-response or a Not Now response to geolocation permissions request doesn't trigger a success/error result for the function. I've added a timeout so that it will give up and continue.

[shua123]

Some changes in v2 to test:

1. In the rebuild I've relied more on JQuery functions. This should help with some of the incompatibility/quirks in older browsers.
2. Trying leaflet's built in locate function to handle geolocation instead of navigator.geolocation. I'm not sure this actually changes anything. I've also messed around with timeouts. Couldn't get timeout to work right with leaflet locate, back to navigator.geolocation for now.
3. I am using marker clustering for the pois. This should help improve performance on mobile. We can change what zoom level it declusters (and set it differently for desktop vs mobile)
4. I've added a svg polyfill so that icons can display in Internet Explorer / IE

[shua123]

Known Issue: Microsoft Edge and Internet Explorer are annoying with SVG clicks. They are not responding to clicks on the surface area of the svg icon for markers making it hard to click markers.

[versatilehuman]

FIXED w/ CSS zoom level adjustments.

On mobile (Firefox & Chrome on Moto G w/ Android 5.1) on searches that require showing the whole map to get to 10 results are showing up without signs. Signs appear once you zoom in a bit:

Same for dev and gh pages

[shua123]

I added special handlers for IE/Edge d0ec994 534afa3

Using png for cluster icon in IE/Edge because there isn't an easy way to get click working for cluster icon edb379b

[shua123]

Can you please check these again? It seems like you were testing right while I was updating the server and site with the new data and schema.

[versatilehuman]

@shua123 Haha, yeah that's it. Phew. I started to get a little suspicious after it happened with Firefox too.

[versatilehuman]

Safari Version 8.0.4, OSX 10.10.2

SVG clickability. Signs and trails work, but if you click directly on an activity or picnic grove you just get the blue focus (if you click just off it, you get the pop up):

[shua123]

I am confused why it would be working for signs and not activities/picnicgroves. Are you sure its actually working when you click on the sign itself (not right below/around it)?

[versatilehuman]

Trying again, most of the sign is clickable, but on the lower parts of sign posts it's not working. The highlight is shifted, so maybe that's why it seems like it's working when clicking right on it?

[versatilehuman]

iPhone 5s w/ iOS 9 and iPhone 4s w/ iOS 9

I know this is a bit of a hack...

Selectize menu not opening up on map. When the input:focus and I drag down it shows:

[shua123]

Try Safari 8.04 SVG clickability again. I am trying this bcd7fa9 based on http://stackoverflow.com/questions/29814709/click-event-not-fired-on-button-with-svg-element-in-safari

[shua123]

Can you please explain more about the selectize opening issue? What is happening?

[versatilehuman]

Clickability works on Safari 8.04.

Selectize menu (also confirmed on iPhone 6 w/ iOS 10):

List search is functional.

Map search, when selected, does not initially show the selectize menu (image 1).

If you touch and swipe down slightly, it appears (image 2). So maybe the menu is too tall to fit initially, but the swipe down frees up more room and it appears?

[versatilehuman]

Map/list toggle doesn’t function in Edge13/14 (Windows 10) and IE11 (Windows 7,8.1,10)

When you have a poi open and close it, it reverts to the correct map/list view based on where the toggle currently is.

But if you activate the toggle it doesn't appear to work.

Video:
https://saucelabs.com/beta/tests/6d9d470ea0b344d7bdf16d7f9a39c244/watch

[versatilehuman]

Click on selectize menu is also activating search result directly under it in Edge13/14 (Windows 10) and IE11 (Windows 7,8.1,10)

Video: https://saucelabs.com/beta/tests/e43de504105a4402ad1fb1a567936b41/watch

Menu is closing too quickly on-click?

[versatilehuman]

POI info panel is showing up over menu IE11 (Windows 7,8.1,10)

Not an issue in Edge.

[versatilehuman]

Search box / button styling issues on IE11 (Windows 7,8.1,10)

[versatilehuman]

Map/List toggle functional, but not moving iOS 9.0
Toggle doesn't move back and forth, but the view does flip from map to list.

This?
http://stackoverflow.com/questions/32804106/angularjs-slide-transition-broken-on-safari-ios-9

[shua123]

• Selectize menu not opening up / iOS on iPhone: Not sure if this fixes the iOS issue but... selectize.css has a max-height of 200px for the list content. The height is not re-adjusting when the virtual keyboard opens which makes it too big for the screen. I am overriding the selectize css max-height on mobile with a vh percent: 0eaabe8 . This seems to recalculate (at least on Android) when the keyboard opens/closes.
• Map/list toggle doesn’t function in Edge13/14 (Windows 10) and IE11 (Windows 7,8.1,10): This should be fixed with 5a88f2d

[versatilehuman]

Selectize menu now opening up on iOS if there is enough room. I'm going to look into how much vertical space each allows w/ keyboard active:
http://www.idev101.com/code/User_Interface/sizes.html

My work 4s isn't leaving much space.

+++

Map/list toggle is functional in Edge13/14 (Windows 10) and IE11 (Windows 7,8.1,10)

[versatilehuman]

Fixed as of 0bd55e4: Search box / button styling issues on IE11 (Windows 7,8.1,10)

[versatilehuman]

Update 4: Tested again after Mapbox issue resolved and this is persisting. I'll test again tomorrow. Colors seem correspond to trail colors and/or icons colors? This looked fine on my Moto G and a Samsung Note 10.1 tablet, so maybe it's the size/resolution of these phones?

Update3: Maybe not. Map looked fine in Samsung Internet app (4.0.30-19) on Galaxy J7/Android 6.0.1 (another larger Android phone), but Chrome 55.0.28883.91 had same issue. Will retest after Mapbox is back to normal.

Update2: Mapbox issue. Having trouble everywhere: http://status.mapbox.com/

Update1: Getting this a little on an iPad right now, but unrendered tiles are grey and POIs/trails show up over them. Maybe the colors are blurred trails that are lagging rendering behind mapbox? Seems like a temp issue?

Solid color background rendered over basemap and some trails/pois Android 6.0.1/ZTE ZMax Pro.

Happend on Firefox 51.0.3 & Chrome 56.0.2924.87. Was rendering over trails and POIs too -- so maybe not Mapbox related? Haven't seen on other Android phone, this is a pretty big phone.

On initial load, you'd get a solid color, as you pinched to zoom out you could see map, but then color would fill back in. Color changed over time.

If you zoomed in enough it would eventually be all map. Screenshots:

[versatilehuman]

Update: Example video https://saucelabs.com/beta/tests/d486d5a9b4ce427e8c7e9ec60aac3206/watch

I think I forgot to transfer this yesterday:
Pop-up flashing issue IE11 (Windows 7,8.1, 10) & Edge13/14 (Windows 10)

Sign clusters work as expected.

I am able to click on signs and activities but the pop-up flashes for a second and disappears. Pop-up stays when selected from panel.

Activity pop-ups don’t work at all on Edge14/Windows 10… but do flash in Edge13

Pop-ups functioning properly on Trail segments

[shua123]

Pop up on IE and Edge should be fixed: 5fb4086

[versatilehuman]

Safari 8 repeatedly asks for location permission after answer given:
http://stackoverflow.com/questions/27150465/geolocation-api-in-safari-8-and-7-1-keeps-asking-permission

[versatilehuman]

Ideas for weird Android solid color issues... thinking it may be Mapbox settings:

mapbox/mapbox-gl-native#1468

[versatilehuman]

@shua123 POI info panel is showing up over selectize menu IE11 (Windows 7,8.1,10) fixed on 1d48179

Checked other browsers and those are all still good.