概述

在移動端上面，比如說微信上面打開一個頁面，如果有video標簽的話，常常會出現video標簽默認置頂的情況，一般的解決方案是在不需要看見它的時候給它加一個display:none進行隱藏。今天在瀏覽TGideas文檔庫的時候無意中發現了另一個方案，記錄下來，供以後開發時參考，相信對其他人也有用。

解決方案

在樣式裏面加入如下樣式：

.compatibleStyle {
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden; /* Chrome 和 Safari */
    -moz-backface-visibility:hidden;  /* Firefox */
    -ms-backface-visibility:hidden;  /* Internet Explorer */
    -webkit-perspective: 0;
    -webkit-transform: translate3d(0,0,0);
    visibility:visible;
}
 

然後給video標簽加上compatibleStyle類就可以了。

參考資料：
TGideas移動端視頻組件

移動端video標簽默認置頂的解決方案