CSS兼容问题

531 阅读2分钟

1、问题:ios8中一个元素同时设置了以下三个属性的话,样式会错乱,border-radius会失效( border-radius + overflow: hidden + transform)?

解决方案:

1、css中添加下面的属性即可:-webkit-mask-image: -webkit-radial-gradient(white, black);

2、postCss的话可以引入这个插件

2、iphoneX 刘海适配

isux.tencent.com/articles/is…

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;
      }
    });
  }
},