Topic: iPad buttons/toggles not clicking
I have an angular website that has pages with all sorts of controls. some are MDBootstrap, some are pure material. I upgraded to MDB Angular 9.0.0 and put our website out into production last night. You can see it here: https://privacyco-op.com All the controls work on all devices and all browsers... except for three test iPads--on them, they are failing for ALL browsers in the same way... we can't press buttons/toggles. The embedded iFrames on those same pages and the swipe left/right using your carousel all seem to work fine--so it isn't some unseen overlay blocking touch events. It's just the buttons, toggles, and menus (which are just buttons). Examples...
<button mat-raised-button (click)="enroll(0)" class="aqua-gradient ipadClick" style="color:white;">
<!-- Sign Me Up! -->
{{text[languageCode]["pan4"].label[0]}}
</button>
<a mdbBtn (click)="blockCookies()" matTooltip="{{this.globals.languages.dialect.Vocab[this.globals.languageIndex].snackBar.tag3}}"
floating="true" gradient="young-passion" mdbWavesEffect>
<mdb-icon size="2x" class="deep-purple-text" aria-hidden="true" fas icon="ban"></mdb-icon>
</a>
You will notice we are even adding a custom class to one to see if we can correct the situation...ipadClick
::ng-deep .ipadClick {
cursor: pointer !important;
::ng-deep {
switch {
cursor: pointer !important;
}
}
::ng-deep .element.grab {
cursor: grab;
cursor: -webkit-grab;
}
::ng-deep .element.grabbing {
cursor: grabbing;
cursor: -webkit-grabbing;
}
}
Suggestions?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 9.0.0
- Device: iPad
- Browser: Safari/FireFox/Chrome
- OS: iPad 13.3.1, 13.0.1
- Provided sample code: No
- Provided link: Yes
appresearcher commented 5 years ago
By the way, we do use MDB carousel, but the menu bar at the top and the footer bar at the bottom are outside of that scope, and those buttons/ tags don't work either. Could the carousel and hammerjs be blocking the buttons/toggles on iPad only? The carousel swipe does work on the iPad, just not all the buttons. We are now testing the last version we wrote before introducing MDB a six weeks ago and seeing if the buttons work on that pre-MDB version and the same test iPads.
appresearcher commented 5 years ago
By the way... we tried removing hammerjs, and your carousel stopped working on ALL devices. We are putting it back in for the time being. Also, before saying it's bad to combine mat and MDB, it's working on ALL other devices... so, it has to be something dumb with iOS.
Arkadiusz Idzikowski staff commented 5 years ago
Did you include HammerModule import? It is required in Angular 9 (previously it was loaded by default). See Angular changelog: https://github.com/angular/angular/blob/master/CHANGELOG.md#900-2020-02-06
In case of any further problems, can you try to reproduce this problem in new project and send us simple demo with an example on which we will be able to reproduce that? Here is my email: a.idzikowski@mdbootstrap.com
appresearcher commented 5 years ago
Please re-read my request - we removed hammerjs temporarily, which means we did include it before. Then we put it back in, which means it has been included again. We can't send you the entire site.
We were expecting you to say, "that's a know problem, and here is how to fix it, (like for us to remove all Material components or something)" or for you to say "our stuff does not work with iOS finger presses on tablets and phones." Is this the first time you have heard of an issue with buttons/toggles not being clickable from iOS mobile devices?
We are going to proceed today with completely removing Angular Materials from our build and completely replacing them with MDB. This will cost us a great deal of time and money as some of your objects are slightly larger or wider than Material, and we will need to make several adjustments to accommodate.
It would be nice to hear back from you that a 9.0.0 pure MDB project positively works with iOS finger presses on tablets and phones before we take those steps. Thank you.
appresearcher commented 5 years ago
Here is a detailed description or our 9.0.0 Angular implementation of hammerjs. Can you please review it and make certain it aligns with MDB best practices? It's in the answer from "appdreamer" here...
https://stackoverflow.com/questions/60380110/angular-9-never-calls-hammergestureconfig-buildhammer/60761571#60761571
appresearcher commented 5 years ago
Can you please confirm our following assumption...
// assuming the following are not provided by MDB and will not break MDB functionality
import { ModuleWithProviders } from "@angular/core"; import { Routes, RouterModule, PreloadAllModules } from '@angular/router'; import { ReactiveFormsModule } from '@angular/forms';
Arkadiusz Idzikowski staff commented 5 years ago
I'm not sure if I understand the question from last comment correctly. Angular router and reactive forms should not break MDB functionality in any way.
The approach to create Hammer Gesture Config used in SO question is correct.
We tried to reproduce this bug on our end but without success. As I mentioned in my previous comment, we would need some example on which we will be able to recreate this problem.