第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

webkit轉(zhuǎn)換translate3d后css z-index丟失

webkit轉(zhuǎn)換translate3d后css z-index丟失

慕無(wú)忌1623718 2019-08-12 16:18:31
webkit轉(zhuǎn)換translate3d后css z-index丟失我有兩個(gè)絕對(duì)定位的div元素重疊。兩者都通過(guò)css設(shè)置了z-index值。我使用translate3dwebkit變換在屏幕上為這些元素設(shè)置動(dòng)畫,然后再返回到屏幕上。變換后,元素不再遵循其設(shè)定z-index值。任何人都可以解釋一旦我對(duì)它們進(jìn)行webkit轉(zhuǎn)換后,div元素的z-index / stack-order會(huì)發(fā)生什么?并解釋我可以做些什么來(lái)保持div元素的堆棧順序?以下是有關(guān)我如何進(jìn)行轉(zhuǎn)換的更多信息。在轉(zhuǎn)換之前,每個(gè)元素都通過(guò)css獲取這兩個(gè)webkit轉(zhuǎn)換值(我使用jQuery來(lái)執(zhí)行.css()函數(shù)調(diào)用:element.css({ '-webkit-transition-duration': duration + 's' });element.css({ '-webkit-transition-property': '-webkit-transform' });然后使用translate3d -webkit-transform對(duì)元素進(jìn)行動(dòng)畫處理:element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, -1px)' });順便說(shuō)一句,我已經(jīng)嘗試將第三個(gè)參數(shù)設(shè)置translate3d為幾個(gè)不同的值,以嘗試在3d空間中復(fù)制堆棧順序,但沒(méi)有運(yùn)氣。此外,iPhone / iPad和Android瀏覽器是我的目標(biāo)瀏覽器,此代碼需要運(yùn)行。兩者都支持webkit轉(zhuǎn)換。
查看完整描述

3 回答

?
12345678_0001

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超5個(gè)贊

位遲到這一點(diǎn)但是試著把丟失了Z-index的元素放在下面,我最近在做一些視差的時(shí)候遇到了一個(gè)問(wèn)題,這有點(diǎn)大大幫助了。

transform-style: preserve-3d;

這節(jié)省了推桿

transform: translate3d(0,0,0);

其他因素會(huì)給GPU帶來(lái)更多壓力


查看完整回答
1 反對(duì) 回復(fù) 2019-08-12
?
撒科打諢

TA貢獻(xiàn)1934條經(jīng)驗(yàn) 獲得超2個(gè)贊

這絕對(duì)與samy-delux指出的bug有關(guān)。這應(yīng)該只影響任何定位為絕對(duì)或相對(duì)的元素。為了解決該問(wèn)題,您可以將以下css語(yǔ)句應(yīng)用于以這種方式定位并導(dǎo)致問(wèn)題的每個(gè)元素:

-webkit-transform: translate3d(0,0,0);

這將將變換應(yīng)用于元素而不實(shí)際進(jìn)行轉(zhuǎn)換,但會(huì)影響其渲染順序,因此它位于導(dǎo)致問(wèn)題的元素之上


查看完整回答
反對(duì) 回復(fù) 2019-08-12
  • 3 回答
  • 0 關(guān)注
  • 615 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)