记一次头疼的ios兼容,愿世界再无iPhone6🙏

1,902 阅读4分钟

最近在写一个项目,碰到的问题还挺多,不难但都挺琐碎的,其中ios机型兼容是真的让人头疼。

1: IOS transform:rotate失效

这个问题是最让我让人头疼啊!!!!!因为要实现一个这样的语音播放效果,由于UI没有切gif动图!!!所以我就只能上手css写,就是三个div,旋转使用到了tranform、rorate、animation。废话少说,直接上代码.

image.png

function WiFiCss(props) {
  return <div className="voice-cont" style={{ overflow: 'hidden' }}>
    <div className="voice first"></div>
    <div className="voice second" style={props.hide ? { animation: 'none' } : {}}></div>
    <div className="voice third" style={props.hide ? { animation: 'none' } : {}}></div>
  </div>
}
 .voice-cont {
  width: 25px;
  height: 25px;
  position: relative;
  transform: rotate(135deg);
  overflow: hidden;

}
.voice {
  box-sizing: border-box;
  border: 2px solid #333;
  border-radius: 50%;
  position: absolute;
}
.first {
  width: 5px;
  height: 5px;
  left: 22px;
  top: 22px;
  background-color: #333;
}
.second {
  width: 12px;
  height: 12px;
  left: 17px;
  top: 17px;
  animation: fade 1s linear .2s infinite;
}
.third {
  width: 20px;
  height: 20px;
  left: 12px;
  top: 12px;
  animation: fade 1s linear .4s infinite;
}
@keyframes fade {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

上面这段代码,在浏览器包括我的华为手机都展示的非常的完美,很流畅,正当我非常开心以为我可以收工的时候。我拿另一台ios12去测试,结果发现transform: rotate(135deg失效,看了半天,看博客有人说是因为perspective视角的问题,所以我给voice-cont的父元素添加了transform: perspective(1000),然后再去看,发现在这台ios手机上没问题了。

我又一次以为我可以完美收工,今天可以准点下班的时候。测试一脸苦闷的走过来和我说:“我真的不是故意的,我真的只是随便顺手拿了这台iPhone6测试了下,我为什么要拿这台手机点一下????”我发现所有的录音播放动态效果全部失效,而且页面还飘逸了。

立马调试手机,查看控制台。发现了原因。因为我所有的列表都有下拉刷新的功能,如下图。在iphone6这台手机上,在我滑动页面的时候,class="am-pull-to-refresh-content am-pull-to-refresh-transition" 会自动添加transform: translate3d(0px, 0px, 0px) 这个css(后面发现,所有的机型包括浏览器都会自动加上这个属性)。我自动去掉就可以发现iPhone6这个页面飘逸的问题解决了。但与此同时,我使用了伪类元素before,用了绝对定位position:absolute,带来了z-index失效的问题。

image.png

image.png

累了,累了,累了!一波未平一波又起!

最后发现连带问题太多,所以只能从根源上解决问题,不使用transform,录音动态播放效果,改成使用定时器轮询播放三张图片来实现。但后面因为临近上预发,所以这台手机iPhone6被记上了,等待下一波修改。而且还发现了最致命的一个事情,不是所有的iPhone6有这个问题,是iPhone6 12点多的系统才出现了这种问题,其他版本的手机没问题,我心里真**一句脏话郁结于心啊!!!心情如下

image.png

2. IOS软键盘收起后整体页面往上移,UI错位

image.png 解决办法很简单,因为页面被顶上去没有滚动下来,所以我们在收起键盘的时候,手动将页面滑下来就行

window.scrollTo(0,0)

3. 一些常用的但不熟悉的代码

3.1 隐藏滚动条

::-webkit-scrollbar {
   display:none;
   width:0;
   height:0;
   color:transparent;
}

3.2 超出多少行隐藏

overflow: hidden;
/* autoprefixer:ignore next*/
-webkit-line-clamp: 1;
/* autoprefixer:on */
-webkit-box-orient: vertical;
text-overflow: ellipsis;
max-height: 40px;
display: -webkit-box; 

3.3 Textarea去除默认样式

resize: none;
outline: none;
border: none;
appearance:none;

3.4 修改软键盘发送按键文字

<input enterkeyhint="enter"> 换行
<input enterkeyhint="done">换行
<input enterkeyhint="go">前往
<input enterkeyhint="next">下一项
<input enterkeyhint="previous">换行
<input enterkeyhint="search">搜索
<input enterkeyhint="send">发送

3.5 react阻止事件冒泡

//需要注意的是,这段代码要加到不需要被触发的元素上
e.nativeEvent.stopImmediatePropagation()
e.stopPropagation()

3.6 border渐变

//需要注意,h5上无效,h5上还是单独写一个div来实现吧!
border-right: 1px solid;
border-image: -webkit-linear-gradient(#F8F8F8 , #AAA , #F8F8F8)1 10 1; /* 控制边框颜色渐变 */
border-image: -moz-linear-gradient(#F8F8F8 , #AAA , #F8F8F8)1 10 1;
border-image: linear-gradient(#F8F8F8 , #AAA , #F8F8F8)1 10 1; /* 标准的必须写在最后 */

4. h5实现录音播放功能

这次项目除了ios兼容,剩下的就是这个录音功能的问题最头疼了,具体交互已经实现效果和微信语音差不多,实现效果不难,主要是语音之间播放的问题比较多点。比如: 1.切换点击语音要暂停之前的语音,之前的语音在没有播放完的情况下显示“继续播放” 2.语音自动播放完暂停播放效果 3.暂停播放语音显示“继续播放”

image.png

<>
    <div className="message-voice" onClick={() => judgeAudioPlay(i)}>
      {val.isPlaying ? <WiFiCss /> : <img src="https://static.aistarfish.com/front-release/file/F2022042717573510900008268.编组(1).png" alt="" />}
      <span className="span-len" style={!val.isPlaying ? { marginLeft: 0 } : {}}>{val.voiceLen}″</span>
      {val.isEnded ? null : <span className="span-text">继续播放</span>}
    </div>
    <div style={{ display: 'none' }}>
      <audio
        id={`audio-${i}`}
        src={val.voiceUrl}
        controls="controls"
        onPlaying={() => onTimeUpdate(i, 'onPlaying')}//开始播放,只执行一次
        onTimeUpdate={() => onTimeUpdate(i, 'onTimeUpdate')}//播放开始,轮询的
        onEnded={() => onTimeEnded(i)} //播放结束
        onPause={() => {//暂停播放
          console.log('onPause', i)
          console.log(onTimeEnded(i, 'pause'))
        }}
      ></audio>
    </div>
</>

总结

这个项目不难,但确实麻烦的事很多!只想说原世界再无iPhone6

image.png