Trying to view a report on mobile has an intermittent flickering bug

[wrightmartin]

• Open FixMyStreet.com on mobile
• Start a new report
• Click an existing report on the map
• It appears, then closes immediately and the map recenters

Appears to be intermittent, and more likely to happen on the first attempt.

Tested on a Pixel 2, running Android 8.1.0, Chrome browser

[dracos]

Yep same here, Chrome 66, Android 6. Think this must be relatively new!

[zarino]

Can’t replicate it in Safari or Firefox on iOS (both using the iOS webkit renderer), or Safari 11 or Firefox 60 on macOS.

But it does also happen in Chrome 66 on macOS, when the window is narrow enough to trigger mobile mode.

So looks likely to be a Chrome thing! Will see whether I can work out what’s happening.

[zarino]

Causes the flicker:

1. Go to fixmystreet.com at a mobile width, in Chrome
2. Enter location, click "GO"
3. Click a marker
4. Notice how the screen momentarily transforms into the report detail screen, and then switches back to the /around screen

Does not cause the flicker:

1. Go to fixmystreet.com at a mobile width, in Chrome
2. Enter location, click "GO"
3. Drag the map, so that an ajax request to /around?ajax=1 is sent
4. Click a marker (original, or newly loaded, it doesn’t matter)
5. Notice the flicker doesn’t happen, and you’re taken to the report details page as expected

[zarino]

More detail…

It looks like the $('#map_sidebar').on('click', '.js-back-to-report-list', function(e) { handler on line 867 of fixmystreet.js is getting called erroneously, and that is what causes the screen to transform back into the /around view (fixmystreet.display.reports_list).

[zarino]

Aha! This is the line that’s causing it: https://github.com/mysociety/fixmystreet/blob/master/web/js/map-OpenLayers.js#L952

[zarino]

Infuriatingly, I can’t reproduce this in Chrome on browserstack, so I can’t work out which version introduced the bug, if indeed it is a bug in Chrome.

It looks like, in Chrome only, OpenLayers.Control.Click is getting triggered after the /report page has been ajaxed in, and therefore $('.js-back-to-report-list').length returns true (as far as the code can tell, we’re on the /report page at this point, and we’ve just clicked the map, which means we need to go back to the /around map view) which kicks us back to the /around view.

I don’t know why OpenLayers.Control.Click is getting triggered after the ajax request. Is it the same click that triggered the ajax request in the first place? Or is it a new click event?

[zarino]

Firefox (top) vs Chrome (bottom):

Note the extra OpenLayers.Control.Click call at the end of the Chrome console log. That’s what causes the report to hide.