原文链接: https://juejin.cn/post/7372396174249459750
作者: WeilinerL
IOS圆角不生效
ios中使用border-radius配合overflow:hidden出现了失效的情况:
![bcf8e35d311835c58d4e56afd386b884.jpeg](https://img-blog.csdnimg.cn/img_convert/bcf8e35d311835c58d4e56afd386b884.jpeg)
出现此问题的原因是因为ios手机会在transform的时候导致border-radius失效
解决方法:在使用动画效果带transform的元素的上一级div元素的css加上下面语句:
-webkit-transform:rotate(0deg);
IOS文本省略溢出问题
在部分ios手机上会出现以下情况:
![fe333b50dac168f4a8f2613997020bec.jpeg](https://img-blog.csdnimg.cn/img_convert/fe333b50dac168f4a8f2613997020bec.jpeg)
原因
在目标元素上设置font-size = line-height
,并加上以下单行省略代码:
.text-overflow {
display: -webkit-box;
overflow : hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
或者:
.text-overflow {
overflow : hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
由于不同系统包含的字体的行高不一致,即使设置了height = line-height
一样会有以上问题
解决方案
经过测试,在height = line-height = font-szie
的情况下,加上padding-top: 1px
可以解决这个问题,即在需要使用单行省略的地方加上:
.demo {
height: 28px;
line-height: 28px;
font-size: 28px;
padding-top: 1px;
}
如:<div class="text-overflow demo">我是需要进行单行省略的文案</div>
安卓手机按钮点击后有橙色边框
![a52f43a5a3eae36c34fd507d918b2749.jpeg](https://img-blog.csdnimg.cn/img_convert/a52f43a5a3eae36c34fd507d918b2749.jpeg)
解决方案:
button:focus {
outline: none;
}
优惠券打孔效果
需求中经常需要实现一类效果:优惠券打孔,如下图所示:
![8d9b18b3fc3c74743a8c2e6dcbb19b2e.jpeg](https://img-blog.csdnimg.cn/img_convert/8d9b18b3fc3c74743a8c2e6dcbb19b2e.jpeg)
通常情况下会找设计采用图片的的形式,但这个方案最大的缺陷是无法适配背景的变化。因此,我们可以采用如下方案,左右两侧各打一个孔,且穿透背景:
![782a405bf8f4ac0f3178d339c6db43b8.jpeg](https://img-blog.csdnimg.cn/img_convert/782a405bf8f4ac0f3178d339c6db43b8.jpeg)
具体细节可以参考这篇文章:纯 CSS 实现优惠券透明圆形镂空打孔效果[1]
Clipboard兼容性问题
navigator.clipboard兼容性不是很好,低版本浏览器不支持
![e1d0c92954708a6a038413420431f3b6.jpeg](https://img-blog.csdnimg.cn/img_convert/e1d0c92954708a6a038413420431f3b6.jpeg)
解决方案:
const copyText = (text: string) => {
return new Promise(resolve => {
if (navigator.clipboard?.writeText) {
return resolve(navigator.clipboard.writeText(text))
}
// 创建输入框
const textarea = document.createElement('textarea')
document.body.appendChild(textarea)
// 隐藏此输入框
textarea.style.position = 'absolute'
textarea.style.clip = 'rect(0 0 0 0)'
// 赋值
textarea.value = text
// 选中
textarea.select()
// 复制
document.execCommand('copy', true)
textarea.remove()
return resolve(true)
})
}
Unocss打包后样式不生效
这个问题是由webpack缓存导致的,在vue.config.js中添加以下代码:
config.module.rule('vue').uses.delete('cache-loader')
具体原因见:UnoCSS webpack插件原理[2]
低端机型options请求不过问题
在我们的业务需求中,覆盖的人群很广,涉及到的机型也很多。于是我们发现在部分低端机型下(oppo R11、R9等),有很多请求只有options请求,没有真正的业务请求。导致用户拿不到数据,报network error
错误,我们的埋点数据也记录到了这一异常。
在我们的这个项目中,我们的后台有两个,一个提供物料,一个提供别的数据。但是奇怪的是,物料后台是可以正常获取数据,但业务后台就不行!
经过仔细对比二者发送的options请求,发现了问题所在:
![21d7ef7b2022c88dde66a54c216ce4ee.jpeg](https://img-blog.csdnimg.cn/img_convert/21d7ef7b2022c88dde66a54c216ce4ee.jpeg)
发现二者主要存在以下差异:
Access-Control-Allow-Headers: *
Access-Control-Allow-origin: *
于是我便开始排查两个响应头的兼容性,发现在这些低端机型上,Access-Control-Allow-Headers: *
确实会有问题,这些旧手机无法识别这个通配符,或者直接进行了忽略,导致options请求没过,自然就没有后续真正的请求了。
![7ee814dee2651f57b7949bac6497e637.jpeg](https://img-blog.csdnimg.cn/img_convert/7ee814dee2651f57b7949bac6497e637.jpeg)
解决方案:由后台枚举前端需要的headers,在Access-Control-Allow-Headers
中返回。
此外,将Access-Control-Allow-Origin
设置为*
也有一些别的限制:
Access-Control-Allow-Origin:\*不生效[3]
Access-Control-Allow-Headers踩坑[4]
参考
border-radius在ios失效问题?[5]
兼容iphone(ios)圆角(border-radius)不起作用的问题[6]
纯 CSS 实现优惠券透明圆形镂空打孔效果[7]
Access-Control-Allow-Origin:\*不生效[8]
Access-Control-Allow-Headers踩坑[9]
参考资料
[1]
https://blog.csdn.net/haplant/article/details/125015825: https://blog.csdn.net/haplant/article/details/125015825
[2]https://juejin.cn/post/7325255455290621986: https://juejin.cn/post/7325255455290621986
[3]https://blog.csdn.net/ssk0411/article/details/109781140: https://blog.csdn.net/ssk0411/article/details/109781140
[4]https://blog.csdn.net/A0101010/article/details/120976663: https://blog.csdn.net/A0101010/article/details/120976663
[5]https://developers.weixin.qq.com/community/develop/doc/000a6c9dee8fc0866e3b9ed5651400: https://developers.weixin.qq.com/community/develop/doc/000a6c9dee8fc0866e3b9ed5651400
[6]https://juejin.cn/post/6988084786577276942: https://juejin.cn/post/6988084786577276942
[7]https://blog.csdn.net/haplant/article/details/125015825: https://blog.csdn.net/haplant/article/details/125015825
[8]https://blog.csdn.net/ssk0411/article/details/109781140: https://blog.csdn.net/ssk0411/article/details/109781140
[9]https://blog.csdn.net/A0101010/article/details/120976663: https://blog.csdn.net/A0101010/article/details/120976663