regressions on mobile #199

Closed
tyrasd opened this Issue Jan 21, 2013 · 15 comments

4 participants

@tyrasd
OpenStreetMap on GitHub member

There are some recently introduced regressions when browsing www.openstreetmap.org with mobile browsers:

  1. "login / signup" links are slightly larger than the rest of the text and can overlap the tabs when the screen is small enough. This is even wore when one is logged in. I think those links were meant to be displayed in the top right corner?
  2. the arrow-down symbol of the "Edit" tab is not displayed.
  3. zoom buttons and layer switcher have a too large top-margin.
  4. zoom buttons apparently shows +/- symbols twice and overlapping.
  5. permalink/shortlink bar cut off on opera mobile
  6. panning and zooming the map does not work on opera mobile (note that panning/zooming is only broken on the main page - it works for example on the mini-maps of changesets).

Some other issues with mobile / small screen devices: (edit: moved to separate issue)

Here are some screenshots (Android 4.1.2, Nexus S):

default android browser:
Screenshot_2013-01-21-09-29-44
Opera Mobile 12.10:
Screenshot_2013-01-21-09-29-18

@tomhughes
OpenStreetMap on GitHub member

Thanks for the report - we'll look at these things.

A small note for the future - in general it's better not to report multiple issues in one ticket as different people may want to work on them and it becomes very hard to track what has and has not been fixed when it is all on one ticket.

@tyrasd
OpenStreetMap on GitHub member

You're right! Will move "some other issues" to a separate issue.

@tomhughes
OpenStreetMap on GitHub member

I've fixed point 3 in 1fe5282 and have been unable to reproduce points 2 and 4 using a small screen view in a normal desktop browser.

@tyrasd
OpenStreetMap on GitHub member

@ 4 - Hm... I see those even in my desktop browsers. Anyway, I think background images for .leaflet-control-zoom-in/out have to be removed from leaflet-all.css.scss (c.f. leaflet changelog)
@ 2 - It looks like androids font (roboto or droid-sans) does not provide this particular glyph (▾ U+25BE BLACK DOWN-POINTING SMALL TRIANGLE) as it doesn't even show up when it's used in E-Mails for example. As a workaround one could use ▼ (U+25BC BLACK DOWN-POINTING TRIANGLE) instead...
@ 6 - I noticed that this can be worked-around by setting position:absolute instead of position:fixed for div#content. In principle, this looks like a bug of Opera Mobile, but I don't see why we have to use fixed positioning for the mobile view after all.

@tomhughes
OpenStreetMap on GitHub member

I think fa53a9c will probably fix point 4.

@tomhughes
OpenStreetMap on GitHub member

Point 2 should be fixed by 469b3c5 which changes the arrow to be U+25BC as suggested.

@tomhughes
OpenStreetMap on GitHub member

I also noticed that the Android browser (in Android v2.x) but not Firefox seems to be positioning the map wrongly, so it is underneath the top bar.

@tomhughes
OpenStreetMap on GitHub member

Testing with the opera mobile emulator from http://www.opera.com/developer/tools/mobile/ it looks like the problems with panning are happening on http://notes.apis.dev.openstreetmap.org/ which has the redesign but not the update to Leaflet 0.5 so it looks like the redesign work is somehow causing that.

@tyrasd
OpenStreetMap on GitHub member

Yes. The commit in question should be b70aa5d where fixed positioning was introduced, instead of absolute.

btw: the zoom-button background images are still present in the embed stylesheet.

@tomhughes
OpenStreetMap on GitHub member

Yes I need @samanpwbb to look at the fixed/absolute position thing really as I don't entirely understand it... I imagine that is also responsible for the odd positioning of the map in the default android browser.

@tomhughes
OpenStreetMap on GitHub member

I've fixed the embed stylesheet in 05cb14b.

@samanpwbb
OpenStreetMap on GitHub member

I just submitted a pull request to help the mobile situation out a bit (#202). Playing with the site a little more on my phone and with the Opera emulator makes it pretty apparent that thoughtful design work is needed to make the site usable on mobile. Right now it's a pretty rough experience. This should at least help a little.

@tomhughes
OpenStreetMap on GitHub member

I've merged #202 now which I hope should help with 1, 5 and 6.

@positron96

Hello. For what it's worth, I confirm that 6 has been fixed. Great job!

@tomhughes
OpenStreetMap on GitHub member

I think a lot of this was already fixed, but in any case the redesign branch (#498) has a much improved mobile interface that resolves most outstanding issues.

@tomhughes tomhughes closed this Nov 29, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment