User Profile Menu Fails to Expand on Mobile

[U8NWXD]

Describe the bug
On mobile screens, the user profile menu at the top fails to expand.

To Reproduce
Steps to reproduce the behavior:

1. Go to the splash screen on mobile
2. Click on the user profile picture at the top

Observed behavior
The background behind the profile picture turns white, but no menu is visible.

Expected behavior
The menu should expand

Screenshots

Smartphone (please complete the following information; delete this section if the issue does not arise on smartphones):

• Device: iPhone X (Simulated via Firefox)
• Browser: Firefox
• Version: 2.8.7

[U8NWXD]

On iPhone (tested on hardware) the menu appears, but the background of the profile photo remains white when the menu is closed by tapping elsewhere on the menu bar. Tested on Safari and Firefox.

[ankita240796]

Hi @U8NWXD, I am not able to reproduce this one as well.

Here are some tests:

1. iPhone (hardware), Chrome:

2. iPhone (hardware), Safari

Can you please check and let me know if I am missing something, Thanks!

[U8NWXD]

@ankita240796 I can still reproduce this error. Here's a screen recording:

I am testing on an iPhone 6 on iOS 12.4

[ankita240796]

I am sorry but I am still not able to reproduce this. @kevintab95 Can you please check once? Thanks!

[ankita240796]

Hmm, on second thoughts. I am on iPhone 7+ and iOS 13.1.3. I think this may be specific to some devices in that case. I will test this on iPhone 6 once. Thanks!

[ankita240796]

Hi @U8NWXD, I tried simulating this through on Inspect on iPhone 6 but it works fine for me.

@kevintab95 @DubeySandeep @seanlip can anyone of you please check this? Thanks!

[seanlip]

I do see this when testing (simulating) with iPhone X in a Firefox desktop browser on Linux.

[seanlip]

Incidentally, the hamburger menu is not working too. Clicking on it changes its symbol to a cross, but does nothing else.

[ankita240796]

Hi @seanlip, Do you also face this issue on hardware?

[ankita240796]

Also, the hamburger issue was supposed to be fix by #8011. I am able to reproduce it too now on test server on iPhone 7+.

\cc @kevintab95

[seanlip]

Don't have iPhone, sorry. But tried on Android phone -- I cannot reproduce the top right menu issue, but I am seeing the hamburger issue (both on test server).

[ankita240796]

Ok, I just checked. I haven't deployed the PR to test server still but I have cherrypicked and checked on release branch and the hamburger issue does not exist. I will push and deploy and check once again.

[kevintab95]

Hi @ankita240796, like you rightly pointed out, looks like the fix #8011 is not on the test server yet. Don't have an iPhone but I'm able to repro this on iPhone X (simulated on firefox). I can confirm that clicking on the User profile seems to work fine on Android though.

@U8NWXD any idea why this happens on your device?

[kevintab95]

Okay I suspect it has something to do with the "onmouseover" event. I tried disabling "touch simulation" in Firefox and it seems to work like @U8NWXD described in this comment*.

Edit:
But on Firefox the highlight disappears once you click outside the submenu.
I guess opening the submenu manually adds a :focus pseudoclass (focus class causes this highlight) and this does not seem to go away on the iPhone (harware) for some reason even on clicking outside the submenu.

oppia/core/templates/dev/head/services/navigation.service.ts

Lines 48 to 52 in 7f2064f

	navigation.openSubmenu = function(evt, menuName) {
	// Focus on the current target before opening its submenu.
	navigation.activeMenuName = menuName;
	angular.element(evt.currentTarget).focus();
	};

[ankita240796]

Thanks for the analysis @kevintab95. I will try to look into it further and find a fix.

[ankita240796]

Removing this from blocking bugs since it cannot be reproduced on mobile devices and only creates issue with Firefox simulation.