HammerJS pan is not working on iOS (under Ionic) - ios

Question

I am programming an app in Ionic and using hammer.js for the pan gesture (for the moment, only this one). In the browser (chrome and safari) this is working fine, also on Android device, but I just discovered that pan gesture is not working on iOS (neither real device nor emulator). After a long while research, I don't find the way to make it work. Neither pan nor panend work (click does).
Note: The events are (should be) launched from a custom component, not a page itself.
I have seen other with similar problems, but no solution that works for me. Here is finally stated that hammerjs it not so compatible with iOS, but here says it it. This guy seems to have a similar problem, but found no solution.
I have also try adding to my app.module.ts the following code and the provider {provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig}. No success.
import * as Hammer from 'hammerjs';
import {HammerGestureConfig, HAMMER_GESTURE_CONFIG} from '#angular/platform-browser';
export class MyHammerConfig extends HammerGestureConfig {
overrides = <any> {
'pan': {
enable: true,
direction: Hammer.DIRECTION_HORIZONTAL
}
};
}
Hier is (an extract of) my code:
export class SeekbarQuantizedComponent implements OnInit, OnChanges {
private stepsPositions: number[]; // Will have the position of the different steps (in %)
private progress = 0; // The progress of the progressbar in %
[...]
onClick($event: MouseEvent) {
const clickX = $event.offsetX * 100 / this.background.nativeElement.offsetWidth;
this.setProgress(clickX);
this.valueSelected.emit(this.selectedPosition);
}
onPan($event) {
this.setProgress(100 * ($event.changedPointers[0].offsetX / this.background.nativeElement.offsetWidth));
}
onPanEnd($event) {
this.setProgress(100 * ($event.changedPointers[0].offsetX / this.background.nativeElement.offsetWidth));
this.valueSelected.emit(this.selectedPosition);
}
[...]
}
The html:
<div #background class="progress-outer"
(click)="onClick($event)"
(pan)="onPan($event)"
(panend)="onPanEnd($event)">
<div class="progress-inner"
[style.width]="progress + '%'">
{{text}}
</div>
</div>