background-size在ios下失效?

最近天天被動畫和音頻折磨~個人比較喜歡用css,所以需求中碰到廣告牌閃爍的需求,果斷使用了css3的動畫,代碼如下:

#ad {
	animation: changeAd 1s infinite;
}
@keyframes changeAd {
	from {
		background: ad1.png no-repeat center center;
		background-size: 100% auto;
	}
	to {
		background: ad2.png no-repeat center center;
		background-size: 100% auto;
	}
}

在瀏覽器測試後,一切ok,然後用ios真機測試,居然發現圖片沒有正常顯示,經過查找,發現是background-size在ios下沒有生效。網上翻找各種資料,都說是ios兼容問題。那一定要用css3寫要怎麼辦呢?於是就開始了各種嘗試,最終測試得出,只要background-size不寫在@keyframes的動畫中就可以了,具體代碼如下:

#ad {
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-position: center center;
	animation: changeAd 1s infinite;
}
@keyframes changeAd {
	from {
		background-image: ad1.png;
	}
	to {
		background-image: ad2.png;
	}
}

那這樣是不是說明,background-size在ios其實不存在兼容問題的,那爲什麼第一種寫法background-size就不生效了?具體是什麼原因導致@keyframes中background-size在ios失效還沒有找到原因。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章