該問題似乎僅基于 chrome。3D 立方體的面/多個面變得透明,使其看起來像是影片正在破裂。有時在休息后添加“背面可見性”可以解決問題,直到下次重新加載。確認通過 JS 添加它并不能解決問題。關注元素有時也不會讓問題發生
重現問題的步驟:
- 轉到鏈接 - https://jsfiddle.net/tk6bd38g/
- 復制相應的 HTML 和 CSS
- 該問題主要在 17-20 秒內重現,但該問題是間歇性的。有時可能需要多次重繪 /等待時間長達 60 秒
Chrome 版本:95.0.4638.69 頻道:穩定作業系統版本:10.0
適用于以下瀏覽器 -
- 火狐 - v94.0.1
- Microsoft Edge - 版本 95.0.1020.40
- 勇敢 - 版本 1.31.88(鉻:95.0.4638.69)
附注。考慮到它可能是一個 chrome 錯誤,我已將該問題提交給 chrome dev。在此之前尋找解決方法/解決方案
mybot {
font-family: "Lato", sans-serif;
font-size: 14px;
font-weight: 400;
color: #333;
position: sticky;
z-index: 2147483640;
cursor: move;
}
mybot * {
-webkit-box-sizing: content-box !important;
-moz-box-sizing: content-box !important;
box-sizing: content-box !important;
}
mybot img {
-webkit-user-drag: none;
-moz-user-drag: none;
-khtml-user-drag: none;
}
mybot .row{
margin-right: 0px;
}
mybot a,
mybot a:hover,
mybot a:focus {
text-decoration: none;
outline: none;
}
@keyframes mybotspincube {
from,to {
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
12% {
-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
16% {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
30% {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
33% {
-webkit-transform: rotateY(-90deg) rotateZ(90deg);
-moz-transform: rotateY(-90deg) rotateZ(90deg);
-ms-transform: rotateY(-90deg) rotateZ(90deg);
transform: rotateY(-90deg) rotateZ(90deg);
}
47% {
-webkit-transform: rotateY(-90deg) rotateZ(90deg);
-moz-transform: rotateY(-90deg) rotateZ(90deg);
-ms-transform: rotateY(-90deg) rotateZ(90deg);
transform: rotateY(-90deg) rotateZ(90deg);
}
50% {
-webkit-transform: rotateY(-180deg) rotateZ(90deg);
-moz-transform: rotateY(-180deg) rotateZ(90deg);
-ms-transform: rotateY(-180deg) rotateZ(90deg);
transform: rotateY(-180deg) rotateZ(90deg);
}
63% {
-webkit-transform: rotateY(-180deg) rotateZ(90deg);
-moz-transform: rotateY(-180deg) rotateZ(90deg);
-ms-transform: rotateY(-180deg) rotateZ(90deg);
transform: rotateY(-180deg) rotateZ(90deg);
}
66% {
-webkit-transform: rotateY(90deg) rotateX(90deg);
-moz-transform: rotateY(90deg) rotateX(90deg);
-ms-transform: rotateY(90deg) rotateX(90deg);
transform: rotateY(90deg) rotateX(90deg);
}
80% {
-webkit-transform: rotateY(90deg) rotateX(90deg);
-moz-transform: rotateY(90deg) rotateX(90deg);
-ms-transform: rotateY(90deg) rotateX(90deg);
transform: rotateY(90deg) rotateX(90deg);
}
83% {
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
transform: rotateX(90deg);
}
97% {
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
transform: rotateX(90deg); }
}
mybot .mybotcubespinner {
-webkit-animation-name: mybotspincube;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 10s;
animation-name: mybotspincube;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 50px 50px 0;
-moz-transform-origin: 50px 50px 0;
-ms-transform-origin: 50px 50px 0;
transform-origin: 50px 50px 0;
}
mybot .mybotcubespinner .mybotface{
position: absolute;
/* backface-visibility: visible; */
width: 100px;
height: 100px;
border: .9px solid #ccc;
background: red;
background: rgba(255,255,255,0.8);
box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
text-align: center;
border-radius: 5px;
}
mybot .mybotcubespinner .mybotface1 {
-webkit-transform: translateZ(50px);
-moz-transform: translateZ(50px);
-ms-transform: translateZ(50px);
transform: translateZ(50px);
background: #360033;
background: -webkit-linear-gradient(to top, #0b8793, #360033);
background: linear-gradient(to top, #0b8793, #360033);
}
mybot .mybotcubespinner .mybotface2 {
-webkit-transform: rotateY(90deg) translateZ(50px);
-moz-transform: rotateY(90deg) translateZ(50px);
-ms-transform: rotateY(90deg) translateZ(50px);
transform: rotateY(90deg) translateZ(50px);
background: url('https://i.pinimg.com/474x/ce/60/cf/ce60cf6c3f5d3ab57136565b104f163b.jpg');
background-repeat: no-repeat;
background-size: cover;
}
mybot .mybotcubespinner .mybotface3 {
-webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(50px);
-moz-transform: rotateY(90deg) rotateX(90deg) translateZ(50px);
-ms-transform: rotateY(90deg) rotateX(90deg) translateZ(50px);
transform: rotateY(90deg) rotateX(90deg) translateZ(50px);
background: #360033;
background: -webkit-linear-gradient(to top, #0b8793, #360033);
background: linear-gradient(to top, #0b8793, #360033);
}
mybot .mybotcubespinner .mybotface4 {
-webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(50px);
-moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(50px);
-ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(50px);
transform: rotateY(180deg) rotateZ(90deg) translateZ(50px);
background: #360033;
background: -webkit-linear-gradient(to top, #0b8793, #360033);
background: linear-gradient(to top, #0b8793, #360033);
}
mybot .mybotcubespinner .mybotface5 {
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(50px);
-moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(50px);
-ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(50px);
transform: rotateY(-90deg) rotateZ(90deg) translateZ(50px);
background: #360033;
background: -webkit-linear-gradient(to top, #0b8793, #360033);
background: linear-gradient(to top, #0b8793, #360033);
}
mybot .mybotcubespinner .mybotface6 {
-webkit-transform: rotateX(-90deg) translateZ(50px);
-moz-transform: rotateX(-90deg) translateZ(50px);
-ms-transform: rotateX(-90deg) translateZ(50px);
transform: rotateX(-90deg) translateZ(50px);
background: #360033;
background: -webkit-linear-gradient(to top, #0b8793, #360033);
background: linear-gradient(to top, #0b8793, #360033);
}
mybot .mybotstagecrn{
width: 100px;
height: 100px;
bottom: 60px;
position: absolute;
right: 25px;
font-size: 15px;
pointer-events: all;
}
mybot .mybotstagecrn-left{
left: 25px;
width: 100px;
height: 100px;
bottom: 60px;
position: absolute;
font-size: 15px;
pointer-events: all;
}
mybot .mybotTopBar{
background: red;
width: 100px;
height: 15px;
border-bottom: .9px solid white;
color: white;
text-align: center;
margin: auto;
line-height: 15px;
}
mybot .mybotPoweredBy{
font-size: 9px;
font-weight: 600;
}
mybot .mybotPoweredByBrand{
font-size: 12px;
font-weight: 600;
}
mybot .mybotBottomBar{
background: red;
width: 100px;
height:15px;
color: white;
margin: auto;
line-height: 15px;
text-align: center;
bottom: 0px;
position: absolute;
font-size: 12px;
}
mybot .mybotSummary{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
font-family: "Lato", sans-serif !important;
font-weight: 600;
color: white;
}
<mybot>
<div class="mybotcubespinner">
<div class="mybotface1 mybotface">
<div class="mybotTopBar">
<span class="mybotPoweredBy">
Powered By
</span>
<span class="mybotPoweredByBrand">
Sample
</span>
</div>
<div class="mybotContent">
<div class="mybotSummary">
<span class="mybotLocation" id="mybotWorldCases">
World Cases
</span>
<div class="mybotCount" id="mybotWorldCount">
45461845412
</div>
</div>
</div>
<div class="mybotBottomBar mybotBottomBarLive">
<span class="">COVID-19 Cases</span>
</div>
</div>
<div class="mybotface2 mybotface"></div>
<div class="mybotface3 mybotface">
<div class="mybotTopBar">
<span class="mybotPoweredBy">
Powered By
</span>
<span class="mybotPoweredByBrand">
Sample
</span>
</div>
<div class="mybotContent">
<div class="mybotSummary">
<span class="mybotLocation" id="mybotWorldDeathsCases">
World Deaths
</span>
<div class="mybotCount" id="mybotWorldDeaths">
4555225
</div>
</div>
</div>
<div class="mybotBottomBar mybotBottomBarLive">
<span class="">COVID-19 Cases</span>
</div>
</div>
<div class="mybotface4 mybotface">
<div class="mybotTopBar">
<span class="mybotPoweredBy">
Powered By
</span>
<span class="mybotPoweredByBrand">
Sample
</span>
</div>
<div class="mybotContent">
<div class="mybotSummary">
<span class="mybotLocation" id="mybotCountryName">
India Cases
</span>
<div class="mybotCount" id="mybotCountryCount">
5454254
</div>
</div>
</div>
<div class="mybotBottomBar mybotBottomBarLive">
<span class="">COVID-19 Cases</span>
</div>
</div>
<div class="mybotface5 mybotface">
<div class="mybotTopBar">
<span class="mybotPoweredBy">
Powered By
</span>
<span class="mybotPoweredByBrand">
Sample
</span>
</div>
<div class="mybotContent">
<div class="mybotSummary">
<span class="mybotLocation" id="mybotCountryName2">
India Deaths
</span>
<div class="mybotCount" id="mybotCountryDeaths">
24552
</div>
</div>
</div>
<div class="mybotBottomBar mybotBottomBarLive">
<span class="">COVID-19 Cases</span>
</div>
</div>
<div class="mybotface6 mybotface">
<div class="mybotTopBar">
<span class="mybotPoweredBy">
Powered By
</span>
<span class="mybotPoweredByBrand">
Sample
</span>
</div>
<div class="mybotContent">
<span class="mybotScoreLiveDot"></span>
<div class="mybotSummary">
<span class="mybotLocation" id="mybotPrecautionText">
Stay Safe!
</span>
<!--<div >
Click for live updates
</div> -->
</div>
</div>
<div class="mybotBottomBar mybotBottomBarLive">
<span class="">COVID-19 Cases</span>
</div>
</div>
</div>
</mybot>
uj5u.com熱心網友回復:
我不確定為什么它在 Chrome 上不起作用,但在其他瀏覽器中起作用,但我注意到您缺少 CSS 中的透視屬性
試試這個:
mybot .mybotcubespinner {
-webkit-animation-name: mybotspincube;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 10s;
animation-name: mybotspincube;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 30000 ;
-webkit-transform-origin: 50px 50px 0;
-moz-transform-origin: 50px 50px 0;
-ms-transform-origin: 50px 50px 0;
transform-origin: 50px 50px 0px;
}
注意 -webkit-perspective 屬性。
我的理論是元素之間存在一些 z-fighting,由于它們沒有空間,它們被夾在同一個空間中,從而導致了這個問題。這在計算機圖形中很常見。
不確定每個瀏覽器是否以不同的方式處理此問題,但通過此更改,它應該可以在 Chrome 上運行。
轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/357772.html
