Not responsive on an iPad

[furrary]

I’m on an iPad Pro iOS 11.2.6. When I try to navigate to another component, I need to touch a link on the sidebar twice to actually starts the navigation.

I’m not sure if this is related to this repo or the angular itself.

[TedSander]

I think it might possibly be iOS and a CSS quirk it has documented here: https://css-tricks.com/annoying-mobile-double-tap-link-issue/

I could repo on my iPad, but getting a dev environment up will take a bit more work.

[TedSander]

So I did narrow this down... It is because the ActiveItemMixin adds mouseenter and mouseleave events which then makes the browser not fire a click event. I couldn't find any documentation on this explicitly for webkit, but the exact behavior for webkit is not well documented.

The reason ActiveItemMixin has this code is for a Firefox bug that was causing list items from popups to scroll weirdly since we were adding scroll into view to ensure the list items were changing on keyboard events. So I don't think I can just remove the events.

I'm not sure exactly what I am going to do to mitigate it, but wanted to preserve the hours worth of debugging I already did.

[TedSander]

This particular instance should be fixed in the next release. Migrated away from ActiveItemMixin for most use cases including the one in the gallery.

[jimmyff]

Hey @TedSander. I have the iOS double tap issue throughout my app. I wondered if you have some insight in to it as you've spent some time debugging it?

It happens consistently on my angular tab & button components & I'm using these mixings to style my tabs:

@include tab-strip-color('.material-header', $brand-fg, $accent);
@include tab-strip-selected-tab-color('.material-header', $brand-fg);
@include tab-strip-accent-color('.material-header', $accent);

When you touch a tab, it highlights it but doesn't activate it, I wondered if it was caused by the use of -webkit-tap-highlight-color, I use it like so:

::ng-deep body {
-webkit-tap-highlight-color : transparentize($accent, 0.7);
}

It also features in the material component ripple mixins:

@mixin mdc-ripple-surface() {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

Both the tab components and button components use the ripple surface so it would make sense that this could be the reason that both of those components aren't working correctly for me?

[jimmyff]

I've just read the blog post that you mentioned earlier. If this is the cause then it's to do with the css :hover selector which should apparently be used only in conjunction with @media (pointer: fine) { in order to avoid this issue.

I've just checked and I don't have any :hover selectors in my project but there are 42 mentions of it in the angular_components project that may potentially be the cause of the issue? Just quickly skimming over them the material_button or mdc_web/ripple mixins look to be the most likely suspects as they're general purpose and shared between components.

I could look at implementing a fix but not sure where you would want the media query to be implemented?

[TedSander]

Please leave separate bug reports with simple repos for each instance if possible.

As you can see in the above debugging it wasn't quite always clear that the hover was the problem, or what/where the fix is all the time. I don't see us going through and ripping out one pattern especially when it doesn't always fix the underlying issue.

For instance the hover styles were not the problem with the menu instance above it was certain events.

That being said most of our products aren't used on tablets very often so the priority of fixing said bugs will probably not be too high, but we will see what we can do.

[jimmyff]

Okay I'll try to put together some simple repos showing the issue. It's not just iPad though, it's mobile Safari so all iPhones too.

[jimmyff]

I have included my workaround for this problem on ticket: https://github.com/dart-lang/angular_components/issues/335