1、问题:ios8中一个元素同时设置了以下三个属性的话,样式会错乱,border-radius会失效( border-radius + overflow: hidden + transform)?
解决方案:
1、css中添加下面的属性即可:-webkit-mask-image: -webkit-radial-gradient(white, black);
2、postCss的话可以引入这个插件
2、iphoneX 刘海适配
3、两个元素背景图之间有条白缝
margin-top: -1px
4、ios手机中input框中粘贴内容keyup事件不触发
原因:keyup在ios手机原生的输入法是不支持的,第三方的输入法搜狗输入法是支持的
兼容: 有两种解决方案:使用input框的input事件和change事件
1.change事件 input输入框的onchange事件,要在 input 失去焦点的时候才会触发; 在输入框内容变化的时候不会触发change,当鼠标在其他地方点一下才会触发; onchange 事件也可用于单选框与复选框改变后触发的事件。 onchange event 所有主要浏览器都支持; onchange 属性可以使用于:input, select, 和 textarea。
2.input事件 oninput 事件在用户输入时触发,它是在元素值发生变化时立即触发; 该事件在 input 或 textarea元素的值发生改变时触发。 缺陷:从脚本中修改值不会触发事件。从浏览器下拉提示框里选取值时不会触发。IE9 以下不支持,所以IE9以下可用onpropertychange 事件代替。
5、IOS:input框输入完成,键盘关闭后位置上移问题
fitIosKeyboardMoveUp() {
let flag;
let myFunction;
const isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isIOS) {
document.body.addEventListener('focusin', () => { // 软键盘弹起事件
flag = true;
clearTimeout(myFunction);
});
document.body.addEventListener('focusout', () => { // 软键盘关闭事件
flag = false;
if (!flag) {
myFunction = setTimeout(() => {
// 当键盘收起的时候让页面回到原始位置(这里的top可以根据你们个人的需求改变,并不一定要回到页面顶部)
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
}, 200);
} else {
return;
}
});
}
},