iOS device access issues - not launching pages from hamburger

[GeraldMit]

5/5 equals a whole. A whole person, a whole community, a whole nation.

is on the Desktop web browsers version, but not the mobile versions.

Tested Mac 10.15.7: Firefox:81.0, Safari:14.0 Tested: Pixel 3aXL Android 11: Firefox 81.1.4, Chrome 86.0

[github-actions[bot]]

Thank you so much for contributing to our work!

[GeraldMit]

In the XCode emulator (Safari, on iPhone 11), hold and open in new tab/window works, simple click does not.

[annumberhocker]

I fixed the problem with the herodescription not displaying for mobile browser. It has been pushed to master. The scss rule for herodescription had "display:none" set.

[annumberhocker]

In the XCode emulator (Safari, on iPhone 11), hold and open in new tab/window works, simple click does not.

I am not sure how to fix this problem. Someone with more experience with mobile browsers needs to investigate.

[drealuc]

Content from Slack(Gerald) Suspect it is one of a known number of problems with vue/carbon/iOS Possibly : click event listener , use touch event as well Unexpected keyword ‘const’. Const declarations are not supported in strict mode. tag not having a href element, not treated as a clickable element. confirmed hrefs in final render.

[drealuc]

Content from Slack(Gerald) On iOS mobile/tablet devices only, regardless of application, the events trigger for click/mousedown seems to not trigger on some items. Works fine on Android mobile/tablet, MacOS safari/firefox/chrome.

I suspect it is the vbind:to in the link <cv-header-menu-item :to=“{ name: ‘support-page’ }“> Voter Support which I believe is the router… in AppHeader.vue… Not sure if it is because there are 2 templates with same exact definitions, or if it is due to needing touch? <cv-header-menu-item :to=“{ name: ‘support-page’ }“> Voter Support resultant html:

Voter Support

as expected given https://github.com/carbon-design-system/carbon-components-vue/blob/master/packages/core/src/components/cv-ui-shell/cv-ui-shell-notes.md“cv-header-name and cv-skip-to-content can be used with either ‘href’ or ‘to’ attributes. The latter as per the cv-link component produces a router-link instead of an anchor tag.”https://github.com/carbon-design-system/carbon-components-vue/blob/master/packages/core/src/components/cv-ui-shell/cv-header-menu-item.vue (edited)

[GeraldMit]

 <cv-side-nav id="side-nav" fixed>
        <cv-side-nav-items>
          <cv-header-side-nav-items>
            <cv-header-menu-item :to="{ name: 'why-page' }">
              Why Vote
            </cv-header-menu-item>

...

          </cv-header-side-nav-items>
        </cv-side-nav-items>
      </cv-side-nav>

The following is carbon (Cv-header) on vue using router (:to) <cv-header-menu-item :to="{ name: 'why-page' }"> This handles the href, and seems to absorb all direct addition of event listeners like click, touchend, etc.

[GeraldMit]

status: Workaround is to hold the selection until open option appears. no current understanding of root cause.

[GeraldMit]

progress: Safari on Mac, when shrunk to iphone size, will switch to the hamburger view. in this size with that view, it is also not triggering onclick... hacked in an attempt to add in the event listeners directly with alerts and can see that the items in the hamburger were NOT getting the click mouse or touch events. So examining further, added a click listener that returned what I clicked on. Turns out, its a div -> seems to be the div that would be there if the screen wasn't shrunk, which means the menu drop is not in the top of the z-index stack, because the hamburger svg still registers the click correctly. possibly that the base DIV is to high in the z-index and the value is too low for the nav set z-index at 8000. Continuing to look.

[drealuc]

Gerald will put a help-wanted in appropriate channel.

Additionally, coding work around for temp fix. ETA ~ today.

Syd going to connect Gerald with Carbon POC.

[GeraldMit]

Updates: 1) Issue was found/declared in carbon-vue. Permanent result will be a fix there then update flowed to here. see https://github.com/carbon-design-system/carbon-components-vue/issues/1056 opened by @sydbails

2) Direct investigation concludes that the Rect used for click in safari has the hamburger based submenu items as their original off view size, and are not in the click area. This can be temporarily adjusted, but the cabon-vue fix is more appropriate. note that the bounding rect show that for a click event, the NAV and all in it are offset to off of the screen NAV rect{(-256,48) to (0,562)} client event: (58, 127) for an (X,Y) point. so the UL, LI, and a, and span are all inheriting -256 left and so no click will register on the object. tag:A (-256,64) to (0,96) offset W:256 oH:32 client/scroll W:252 H:28 style: display inherited 'flex', position inherited 'relative' left and top are 0px The NAV tag is what starts the positioning in -256. Its parent(HEADER) starts at 0.

3) known issue to be due to objects in hierarchy that are non-interactive, see https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event Safari Mobile notes. Not that this isn't what is preventing the click on its own, as the elements are not getting events in the area due to rect above.

[GeraldMit]

Code change was put into carbon-design-system/carbon-components-vue/pull/1060

[sydrosa]

I recently updated the carbon-vue package to their latest release, which addressed this problem specifically. This works now. 🥳

[drealuc]

Syd, this is great!! I will check it out. Thank you very much for closing this out.