嗨,我有一个css动画工具提示,可以在.tooltip:hover::before
上激活,并且在Safari 13.1中遇到了一些奇怪的问题(尽管我的Macbook air Safari 12.0动画仍然很慢,但它仍然可以工作)。
现在在Safari中,动画会闪烁,然后在网页的其余时间内根本无法播放。如果我打开了Safari开发工具,则在图形标签上,然后用动画刷新页面,一切实际上都可以正常工作。
所以我想我要问的是:
Link to Codepen Link to Example site
有问题的CSS代码段
.tooltip {
position: relative;
color: var(--blue, blue);
z-index: 9999;
}
.tooltip:hover {
cursor: pointer;
}
.tooltip::before {
content: attr(tooltip-text);
display: none;
position: absolute;
width: 350px;
padding: 1em;
top: 50%;
left: 0;
right: initial;
transform: translate(75px,125%);
text-align: center;
text-transform: none;
font-size: 14px;
border-radius: 5px;
box-shadow: 0px 5px 7px rgba(0, 0, 0, 0.1);
background-color: var(--accent-bg, #d2f0e3);;
color: black;
opacity: 0;
-khtml-opacity: 0;
-moz-opacity: 0;
-webkit-opacity: 0;
-webkit-transition: all .2s ease-in-out .25s;
transition: all .2s ease-in-out .25s;
z-index: 1;
}
.tooltip::before .small { width: 100px; }
.tooltip::before .medium { width: 200px; }
.tooltip::before .large { width: 350px; }
.tooltip:active::before,
.tooltip:hover::before {
display: block;
animation: fadeIn 0.2s ease-out forwards;
-webkit-animation: fadeIn 0.2s ease-out forwards;
-moz-animation: fadeIn 0.2s ease-out forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
-khtml-opacity: 0;
-moz-opacity: 0;
-webkit-opacity: 0;
}
to {
opacity: 1;
-khtml-opacity: 1;
-moz-opacity: 1;
-webkit-opacity: 1;
}
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
-khtml-opacity: 0;
-moz-opacity: 0;
-webkit-opacity: 0;
}
to {
opacity: 1;
-khtml-opacity: 1;
-moz-opacity: 1;
-webkit-opacity: 1;
}
}
谢谢!