在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML5  HTML/ 為什么css的動(dòng)畫(huà)會(huì)消失

為什么css的動(dòng)畫(huà)會(huì)消失

下面這個(gè)網(wǎng)址里有一個(gè)H5的頁(yè)面,掃描二維碼,
在PC和安卓的手機(jī)預(yù)覽都是正常的,動(dòng)畫(huà)播放完就停住了,但是在iphone上就會(huì)播放一編然后消失(比如第一頁(yè)的兩片旋轉(zhuǎn)進(jìn)場(chǎng)的葉子);

https://www.xitieba.com/template/745/preview
回答
編輯回答
清夢(mèng)

以下回答來(lái)自:https://div.io/topic/1670
我是勤勞的搬運(yùn)工。。。

安卓和 IOS html5 動(dòng)畫(huà)卡頓解決方案
1.IOS 支持彈性滑動(dòng)
body{

-webkit-overflow-scrolling:touch;

}
2.動(dòng)畫(huà)卡頓的解決方案
2.1 改變?cè)匚恢檬褂?css3 新屬性,觸發(fā) GPU (硬件加速)輔助渲染動(dòng)畫(huà) 擴(kuò)展閱讀點(diǎn)這里

2.2 使用 chrome 開(kāi)發(fā)者工具,查看動(dòng)畫(huà)元素是否造成周圍大量 DOM 節(jié)點(diǎn)的重排(reflow),如果是則對(duì)動(dòng)畫(huà)元素使用 absolute 定位,脫離所在文檔流,減少對(duì)周圍元素的影響。

2.3 對(duì)要做動(dòng)畫(huà)的元素使用backface-visibility,opacity,perspective

這里屬性主要是設(shè)置動(dòng)畫(huà)元素只渲染面向用戶的一面。減少動(dòng)畫(huà)渲染對(duì)系統(tǒng)性能的消耗。

{
-webkit-backface-visibility:hidden;

    backface-visibility:hidden;

    -webkit-perspective: 1000;
            perspective: 1000;

}

2018年6月17日 10:34
編輯回答
魚(yú)梓

用 Mac + iPhone safari 開(kāi)啟開(kāi)發(fā)人員模式之后調(diào)試。

2017年4月5日 23:45