1063608 - Unable to click log in icons for GitHub or Persona

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Sign-in, defect)

Description

[Rebecca Billings [:rbillings]]

When trying to sign in, users get a drop down with links to GitHub & Persona. However, users cannot actually click the GitHub or Persona icon to sign in that way - they must click the link from the drop down that displays.

This repros on Chrome, FF, Safari, etc.

Comment 1

[David Walsh :davidwalsh]

Cannot reproduce:  http://screencast.com/t/lQOc6TN1

Comment 2

[Stephanie Hobson [:shobson]]

I was able to trigger sign in by clicking both the GitHub logo on the purple background and the GitHub logo in the dropdown menu. :rbillings can you provide us with more information? Maybe a screen shot of where you are clicking? Are you on a touch screen?

Comment 3

[Rebecca Billings [:rbillings]]

Attachment: 2014-09-05_1002.swf

I am using desktop versions of each browser. I've attached a video of clicking the icons for both persona & github.

Comment 4

[Stephanie Hobson [:shobson]]

Ah-ha! This is triggered on monitors under 1024. Thank you for the video :)

We're using pointer-events: none on these icons because I requested they not accept touch input. We shouldn't interfere with mouse input though so another way will have to be found.

Comment 5

[Rebecca Billings [:rbillings]]

Good call! When I expand my browser to fit the full screen [which I usually never do when working] I am able to click the icons.

Comment 6

[David Walsh :davidwalsh]

:shobson : Your original idea was to disable those buttons for smaller screens/devices, and I agree.  Playing the 'tap' or 'click' wont be very consistent because some browsers fire click on tap anyway.  I'd prefer to wontfix this.

Comment 7

[Stephanie Hobson [:shobson]]

Okay, two possible solutions:

1) Disable the functionality on mobile but not tablet sizes.
2) Change the appearance when we disable the change.

I'm going to do #2.

Should we also do #1? Or maybe we have some kind of intermediate break point I can use? 768? :davidwalsh?

Comment 8

[David Walsh :davidwalsh]

My preference would be to hide the icons and remove "with" from the button, so on tablet and smaller the widget simply said "Sign In".  #2 would probably be OK too though, whatever you think is best.

Comment 9

[Stephanie Hobson [:shobson]]

:davidwalsh Sorry, my #2 wasn't clear. I was proposing doing what you are proposing. Do you want to do it or shall I?

Comment 10

[[github robot]]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/37c8e0a9ada53438e3f4f641741c29c7e74404bc
Fix Bug 1063608 - Small screen login icons

Prevent icons from displaying on smaller screens so there is no confusion over what clicking/taping on them will do.

https://github.com/mozilla/kuma/commit/178245b1206ad80a1986f60a98a31d5d8c92f21d
Merge pull request #2748 from stephaniehobson/BUG-1063608-small-screen-login-icons

Fix Bug 1063608 - Small screen login icons

Comment 11

[Rebecca Billings [:rbillings]]

I still see the icons on devloper.allizon.org using a phone.

Comment 12

[David Walsh :davidwalsh]

We'll be pushing this change to staging and production this morning :)

Comment 13

[Rebecca Billings [:rbillings]]

Verified that Sign In link displays on smaller screens/mobile devices, with drop down links to Persona & GitHub.