编辑：在 iOS 12.4.6 上它仍然不起作用，但至少该条不再跳跃，但仍然没有注册值，或者在预设值 20% 处取消静音。在 iOS 13.3.1（我的另一部手机）上，所有描述的问题都会重现
我的 Web 应用程序中有一个垫子滑块来控制在后台运行的视频的音量。
在 iOS (Safari / Chrome) 上，它不尊重我的任何实现，即当用户取消静音视频以跳转到 20% 时（它跳转到 100% 但是值未注册，它仍然听到 20% ）。
如果我尝试滑动到任何值，它会自行跳回 100%。使用 Taps 而不是 Sliding，它会停留在该位置上，但不会记录值（音量保持不变）。
在 Android 设备/桌面上，它可以按我的意愿工作。
包.json
{
"name": "taraful-turnenii-web-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --host 192.168.1.2",
"build": "ng build",
"build-prod" : "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^9.1.2",
"@angular/cdk": "^9.2.1",
"@angular/common": "~9.1.1",
"@angular/compiler": "~9.1.1",
"@angular/core": "~9.1.1",
"@angular/forms": "~9.1.1",
"@angular/material": "^9.2.1",
"@angular/platform-browser": "~9.1.1",
"@angular/platform-browser-dynamic": "~9.1.1",
"@angular/router": "~9.1.1",
"bootstrap": "^4.4.1",
"hammerjs": "^2.0.8",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.901.1",
"@angular/cli": "~9.1.1",
"@angular/compiler-cli": "~9.1.1",
"@angular/flex-layout": "^9.0.0-beta.29",
"@angular/language-service": "~9.1.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.11.1",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.4.1",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~3.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.8.3"
}
}
命令行界面
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 9.1.1
Node: 13.13.0
OS: win32 x64
Angular: 9.1.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.901.1
@angular-devkit/build-angular 0.901.1
@angular-devkit/build-optimizer 0.901.1
@angular-devkit/build-webpack 0.901.1
@angular-devkit/core 9.1.1
@angular-devkit/schematics 9.1.1
@angular/cdk 9.2.1
@angular/cli 9.1.1
@angular/flex-layout 9.0.0-beta.29
@angular/material 9.2.1
@ngtools/webpack 9.1.1
@schematics/angular 9.1.1
@schematics/update 0.901.1
rxjs 6.5.5
typescript 3.8.3
webpack 4.42.0
垫滑块的 HTML 代码：
<mat-slider class="matSlider"
[value]="matBarValue"
(input)="videoElement.volume = $event.value"
(change)="changeBtnIcoWithSlider(videoElement, muteBtn)" tickInterval="0.01" step="0.01" min="0" max="1"></mat-slider>
CSS：
.mat-slider {
position: relative;
float: left;
left: 0;
right: 0;
width: 17vw;
}
@media(max-width: 397px) {
.mat-slider {
margin-top: 3px;
width: 200px;
}
}
@media(max-width: 768px) {
.mat-slider {
margin-top: 3px;
width: 77vw;
}
}
在滑块中调用的 TS 代码
changeBtnIcoWithSlider(videoElement, muteBtn: HTMLButtonElement) {
if (videoElement.volume > 0) {
videoElement.muted = false;
this.matBarValue = videoElement.volume;
muteBtn.innerHTML = 'Mute Video'
this.imageSrc = 'assets/VolIcon.png';
} else {
muteBtn.innerHTML = 'Unmute Video';
this.imageSrc = 'assets/MuteIcon.png';
videoElement.muted = true;
}
}
我尝试了什么：添加hammerjs但是我读到这个版本的角度不是强制性的，以便mat-slider与手势识别一起工作（它适用于android ..）
将 mat 滑块模块导入放在 BrowserAnimationsModule 和 BrowserModule 之后，也在它们之间或之上，因为我看到这些命令帮助了其他人。
没有任何效果。
谢谢你 。