1.transfrom和吸頂沖突
2.移動(dòng)端300ms點(diǎn)擊延遲和點(diǎn)擊穿透問(wèn)題
一般情況下钧排,如果沒(méi)有經(jīng)過(guò)特殊處理,移動(dòng)端瀏覽器在派發(fā)點(diǎn)擊事件的時(shí)候,通常會(huì)出現(xiàn)300ms左右的延遲。
移動(dòng)端300ms點(diǎn)擊延遲和點(diǎn)擊穿透問(wèn)題
問(wèn)題由來(lái)
2007 年蘋(píng)果公司發(fā)布 iPhone ,蘋(píng)果的工程師們做了一些約定郊供,應(yīng)對(duì) iPhone 這種小屏幕瀏覽桌面端站點(diǎn)的問(wèn)題。雙擊縮放近哟,即用手指在屏幕上快速點(diǎn)擊兩次驮审,iOS 自帶的 Safari 瀏覽器會(huì)將網(wǎng)頁(yè)縮放至原始比例。 那么這和 300 毫秒延遲有什么聯(lián)系呢椅挣? 假定這么一個(gè)場(chǎng)景头岔。用戶在 iOS Safari 里邊點(diǎn)擊了一個(gè)鏈接塔拳。由于用戶可以進(jìn)行雙擊縮放或者雙擊滾動(dòng)的操作鼠证,當(dāng)用戶一次點(diǎn)擊屏幕之后,瀏覽器并不能立刻判斷用戶是確實(shí)要打開(kāi)這個(gè)鏈接靠抑,還是想要進(jìn)行雙擊操作量九。因此,iOS Safari 就等待 300 毫秒,以判斷用戶是否再次點(diǎn)擊了屏幕荠列。其他移動(dòng)瀏覽器都復(fù)制了 iPhone Safari 瀏覽器的多數(shù)約定类浪,包括雙擊縮放,幾乎現(xiàn)在所有的移動(dòng)端瀏覽器都有這個(gè)功能肌似。
目前费就,瀏覽器開(kāi)發(fā)商的解決方案主要有:
方案一:禁用縮放
<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">
表明這個(gè)頁(yè)面是不可縮放的,那雙擊縮放的功能就沒(méi)有意義了川队,此時(shí)瀏覽器可以禁用默認(rèn)的雙擊縮放行為并且去掉300ms的點(diǎn)擊延遲力细。
方案二:FastClick
事件執(zhí)行的順序是touchstart > touchend > click。而click事件有300ms的延遲固额。
300ms延遲會(huì)引發(fā)點(diǎn)擊穿透問(wèn)題