Hi,
The mobile toolbar is not working on iOS devices. Tested on iPad 3 and iPhone 6s with Safari and Chrome.
The main menu, the search icon and the user badge cannot be seen.
Tested on a clean install running on Pantheon.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Olof created an issue. See original summary.

mpotter’s picture

Priority: Major » Normal

Will look into this but would appreciate anybody that could help debug it since it works fine in Safari and Chrome when using the mobile-sized window so the css responsiveness is working. Perhaps its some specific javascript problem between the desktop browser and the mobile browser that is preventing the various panel panes from getting moved into their mobile menus.

I don't have an iOS device, but wonder if there is any sort of javascript console that you can check for any errors.

Argus’s picture

I haven't noticed any problems or unexpected things with the toolbar on my iPhone 6s, nor my iPad. Tested the iPad with Safari and Chrome, the iPhone only with Safari.

Olof’s picture

FileSize
175.25 KB
136.23 KB

Uploaded portrait and landscape view on my iPad 3 running iOS 9.2.1

mpotter’s picture

Try turning off the banner that is showing above the toolbar (In Banner settings, set the site banner to be Hidden). Just want to see if that is somehow interfering with the display of the mobile menus in the toolbar somehow.

I need to be able to test this starting from a default Atrium install. Something you have done in customizing your site seems to have caused this so we will need your help to track that down.

Olof’s picture

The banner is already hidden. What you see as a banner is the part of the screen dump where the URL is shown, which I have hidden.

This site is a clean install on Pantheon and the only customizations I have made was adding a space and some sub spaces.

I have tried to turn on the site banner but there is no difference. The banner is shown but not the menu, when tested on an iPad in portrait mode.

mpotter’s picture

No, the bar that has the Atrium logo and the site name "oaclean" is the banner. That shouldn't be enabled by default. By default (at least on my sites) there is just a single bar and the Atrium logo is to the right of the "hamburger menu" icon. So something is different here.

Olof’s picture

Created a new site on Pantheon, just to be sure to have a clean install. Made no modification just logged in as user1.
The problem is still present as can be seen from the screen dump called "Portrait orig".

I then when to the default site template in Pages and removed the CSS-class oa-navbar in "Configure CSS on Open Atrium Modern Toolbar". The result can be seen in the screen dump "Portrait CSS oa-navbar removed".

I am not that skilled in CSS so it is difficult for me to make further investigations.

mpotter’s picture

Yep, that's exactly what I wanted to see tested. Maybe you can email me the public URL for the Pantheon site you just set up so I can try it.

Yes, removing the css class oa-navbar makes perfect sense because that is what is used to hide the desktop elements. Javascript is used to move those toolbar widgets into various mobile menus. So still seems like an issue with Javascript not running.

Have you checked your phone browser to make sure javascript is enabled. Can you tap the = hamburger menu and get a drop-down list?

Olof’s picture

The URL is dev-oaclean.pantheonsite.io

Javascript is enabled, I have tried Safari, Chrome and Firefox without any success.

The hamburger bar is not present in portrait mode, works OK in landscape mode.

mpotter’s picture

OK, I think I tracked down the problem. Seems that iOS doesn't support the standard "flex" css syntax and still needs the older "-webkit-flex" css. I'll see if I can update the css for this so stay tuned.

Olof’s picture

FileSize
127.72 KB

Hi,
It seems that this problem has not been fixed. I have updated my clean installation on Pantheon to OA 2.62.
As you can see from the screen dump in the file "IOS 9_3_1 portrait.png" only the "user badge" is shown in the toolbar when in "portrait mode". OK in "landscape mode"

Olof’s picture

Version: 7.x-2.60 » 7.x-2.62
mpotter’s picture

Hmm, I can't reproduce this on Browserstack now. Is there any way for you to check your css on that device to see if it is recognizing the -webkit-flex css rules? I don't have any real physical device to test on so have no idea what else the issue might be.

And of course hopefully you cleared all your css caches etc when doing the update. Also, have you tried a completely new install of 2.62?

Olof’s picture

This might not be an iOS issue. I have been able recreate this issue in Firefox and Chrome by emulating a responsive device.
In Firefox use Crtl+Shift+M to select a responsive mode and then select the resolution 768x1024.

Olof’s picture

I can resolve this issue by changing line 6574 in oa_basetheme.style.css
from "@media (min-width: 768px) {" to "@media (min-width: 769px) {".

Could you please check if this is the correct way to resolve the issue or if
some .scss file should be changed.

mpotter’s picture

Ctrl-Shift-M just opens the sidebar in Firefox so maybe you are using a plugin I don't have? Give me more steps on reproducing this in Chrome or Firefox because I still cannot reproduce it.

That line in oa_basetheme.style.css comes from the Bootstrap CSS navbar.scss file, so that would be a bug in Bootstrap, but I haven't found any other issue for Bootstrap about this so I'm not sure I should be changing that underlying styling.

Olof’s picture

I am using Firefox an Chrome on Win 10.
Ctrl-Shift-M sets the browser in Responsive Design Mode. You may be able to do that by selecting Responsive Design Mode under Tools-Web Developer.

In Chrome see this link "https://developers.google.com/web/tools/chrome-devtools/iterate/device-m..." for instructions on how to set Chrome i Responsive Design Mode.

When the browser is in Responsive Design Mode, select the resolution 768 x 1024 and the "hamburger menu" and the search icon dissapears.

mpotter’s picture

OK, that worked. Fascinating that it's only a problem when the screen width is EXACTLY 768.

I think the problem might be this code in the oa_responsive_regions module:

@media (max-width: 768px) {
  .navbar .oa-navbar div[class*="-mobile-menu"] {
    display: none;
  }
}

Changing it from 768px to 767px fixes it. In general, media elements that use "max-width" should be 767px if other media elements use min-width 768.

I'll go through the code and look for more occurrences of this. There are definitely some other issues. Will post a patch here for testing purposes.

mpotter’s picture

Status: Active » Fixed

I'm a bit confused on the original post though. It talked about this being a problem on iOS and specifically mentions the iPhone 6s. But that doesn't have a width of 786px. As far as I can tell, this new issue is only for the iPad or devices with width = 768. Probably should have clarified that in the post.

Anyway, a patch isn't really practical because this affected so many different submodules. Will post the various commits here:

oa_basetheme: d26c9bd
oa_brand: 452ed1c
oa_comment: 4b776c0
oa_files: 70b1a17
oa_home: 55801c2
oa_sandbox: 3b88f3f
oa_sitemap: 4cfeb92
oa_toolbar: 7c5d65e
oa_responsive_regions: a2419ed

If you want to apply each of those commits and give it a test, that would be appreciated. But going to close this as fixed and all these commits will be in the next Atrium release.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.