在滴滴開(kāi)發(fā)H5一年了，我遇到了這些問(wèn)題

https://juejin.cn/post/7372396174249459750

作者: WeilinerL

IOS圓角不生效

ios中使用border-radius配合overflow:hidden出現(xiàn)了失效的情況：

出現(xiàn)此問(wèn)題的原因是因?yàn)閕os手機(jī)會(huì)在transform的時(shí)候?qū)е耣order-radius失效

解決方法：在使用動(dòng)畫(huà)效果帶transform的元素的上一級(jí)div元素的css加上下面語(yǔ)句：

-webkit-transform:rotate(0deg);

IOS文本省略溢出問(wèn)題

在部分ios手機(jī)上會(huì)出現(xiàn)以下情況：

原因

在目標(biāo)元素上設(shè)置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;
}

由于不同系統(tǒng)包含的字體的行高不一致，即使設(shè)置了height = line-height 一樣會(huì)有以上問(wèn)題

解決方案

經(jīng)過(guò)測(cè)試，在height = line-height = font-szie的情況下，加上padding-top: 1px可以解決這個(gè)問(wèn)題，即在需要使用單行省略的地方加上：

.demo {
    height: 28px;
    line-height: 28px;
    font-size: 28px;
    padding-top: 1px;
}

如：<div class="text-overflow demo">我是需要進(jìn)行單行省略的文案</div>

安卓手機(jī)按鈕點(diǎn)擊后有橙色邊框

解決方案：

button:focus {
    outline: none;
}

優(yōu)惠券打孔效果

需求中經(jīng)常需要實(shí)現(xiàn)一類(lèi)效果：優(yōu)惠券打孔，如下圖所示：

通常情況下會(huì)找設(shè)計(jì)采用圖片的的形式，但這個(gè)方案最大的缺陷是無(wú)法適配背景的變化。因此，我們可以采用如下方案，左右兩側(cè)各打一個(gè)孔，且穿透背景：

具體細(xì)節(jié)可以參考這篇文章：純 CSS 實(shí)現(xiàn)優(yōu)惠券透明圓形鏤空打孔效果^[1]

Clipboard兼容性問(wèn)題

navigator.clipboard兼容性不是很好，低版本瀏覽器不支持

解決方案：

const copyText = (text: string) => {
  return new Promise(resolve => {
    if (navigator.clipboard?.writeText) {
      return resolve(navigator.clipboard.writeText(text))
    }
    // 創(chuàng)建輸入框
    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()
    // 復(fù)制
    document.execCommand('copy', true)
    textarea.remove()
    return resolve(true)
  })
}

Unocss打包后樣式不生效

這個(gè)問(wèn)題是由webpack緩存導(dǎo)致的，在vue.config.js中添加以下代碼：

config.module.rule('vue').uses.delete('cache-loader')

具體原因見(jiàn)：UnoCSS webpack插件原理^[2]

低端機(jī)型options請(qǐng)求不過(guò)問(wèn)題

在我們的業(yè)務(wù)需求中，覆蓋的人群很廣，涉及到的機(jī)型也很多。于是我們發(fā)現(xiàn)在部分低端機(jī)型下（oppo R11、R9等），有很多請(qǐng)求只有options請(qǐng)求，沒(méi)有真正的業(yè)務(wù)請(qǐng)求。導(dǎo)致用戶拿不到數(shù)據(jù)，報(bào)network error錯(cuò)誤，我們的埋點(diǎn)數(shù)據(jù)也記錄到了這一異常。

在我們的這個(gè)項(xiàng)目中，我們的后臺(tái)有兩個(gè)，一個(gè)提供物料，一個(gè)提供別的數(shù)據(jù)。但是奇怪的是，物料后臺(tái)是可以正常獲取數(shù)據(jù)，但業(yè)務(wù)后臺(tái)就不行！

經(jīng)過(guò)仔細(xì)對(duì)比二者發(fā)送的options請(qǐng)求，發(fā)現(xiàn)了問(wèn)題所在：

發(fā)現(xiàn)二者主要存在以下差異：

1. Access-Control-Allow-Headers: *
2. Access-Control-Allow-origin: *

于是我便開(kāi)始排查兩個(gè)響應(yīng)頭的兼容性，發(fā)現(xiàn)在這些低端機(jī)型上，Access-Control-Allow-Headers: *確實(shí)會(huì)有問(wèn)題，這些舊手機(jī)無(wú)法識(shí)別這個(gè)通配符，或者直接進(jìn)行了忽略，導(dǎo)致options請(qǐng)求沒(méi)過(guò)，自然就沒(méi)有后續(xù)真正的請(qǐng)求了。

解決方案：由后臺(tái)枚舉前端需要的headers，在Access-Control-Allow-Headers中返回。

此外，將Access-Control-Allow-Origin設(shè)置為*也有一些別的限制：

• Access-Control-Allow-Origin:\*不生效^[3]
• Access-Control-Allow-Headers踩坑^[4]

參考

• border-radius在ios失效問(wèn)題？^[5]
• 兼容iphone(ios)圓角（border-radius）不起作用的問(wèn)題^[6]
• 純 CSS 實(shí)現(xiàn)優(yōu)惠券透明圓形鏤空打孔效果^[7]
• Access-Control-Allow-Origin:\*不生效^[8]
• Access-Control-Allow-Headers踩坑^[9]