相关疑难解决方法(0)
为什么在CSS3中启用硬件加速会降低性能？
我正在css3实验中移动6000个小div元素,使用从top: 0转换top: 145px到测试性能.
在谷歌浏览器上使用无硬件加速运行平稳.
如果我通过translateZ(0)性能启用硬件加速变得可怕.
为什么会这样？
这是我的示例代码:http://dl.dropboxusercontent.com/u/17844821/tmp/hwtest.html
更新(2014-11-13):由于这个问题仍然引起人们的注意,我想指出问题本身似乎仍然存在,尽管在现代硬件上提供的演示中,所提到的口吃可能不再可见.较旧的设备可能仍然会出现性能问题.
推荐指数
解决办法
查看次数
什么-webkit-transform:translate3d(0,0,0); 到底怎么办？适用于身体？
到底-webkit-transform: translate3d(0,0,0); 是做什么的？它有任何性能问题吗？我应该将它应用于身体或个体元素吗？它似乎大大改善了滚动事件.
谢谢你的教训!
推荐指数
解决办法
查看次数
CSS关键帧动画CPU使用率很高,应该这样吗？
我在几个元素上使用以下关键帧动画:
@keyframes redPulse {
from { background-color: #bc330d; box-shadow: 0 0 9px #333; }
50% { background-color: #e33100; box-shadow: 0 0 18px #e33100; }
to { background-color: #bc330d; box-shadow: 0 0 9px #333; }
}
@-webkit-keyframes redPulse {
from { background-color: #bc330d; box-shadow: 0 0 9px #333; }
50% { background-color: #e33100; box-shadow: 0 0 18px #e33100; }
to { background-color: #bc330d; box-shadow: 0 0 9px #333; }
}
.event_indicator {
display: inline-block;
background-color: red;
width: 5px;
margin-right: 5px;
-webkit-animation-name: …推荐指数
解决办法
查看次数
变换错误:缩放和溢出:隐藏在Chrome中
使用CSS3属性transform: scale,我发现了一个有趣的问题.我想为照片制作一点缩放效果.但是,当我用父DIV overflow: hidden和border-radius,孩子的div扩展父div的超越.
更新:
问题没有解决.如果我添加transition,仍然无法正常工作.我试图解决这个问题,但没有成功.
这是一个演示
推荐指数
解决办法
查看次数
Hover + Flickering上的CSS + Opacity更改
我试图实现一个非常简单的事情:在悬停时更改表格行的不透明度.
不幸的是,它不能很好地工作,因为如果我快速地进出,有时不透明度的变化太慢而且看起来颜色是闪烁的.当我徘徊进出有点慢时,这种闪烁不会发生.
我做了一个例子让你知道我的意思:
这种行为是浏览器错误还是我的代码有问题？它可以以某种方式修复吗？我试图使用Jquery脚本而不是通过CSS进行不透明度更改,但结果是相同的:/
推荐指数
解决办法
查看次数
CSS动画残留像素片段
我注意到在从屏幕的一侧到另一侧的大小和框阴影的简单CSS动画之后留下的残留像素片段.
这是代码笔,所以你可以看到它在行动,它在Chrome 66中看起来像这样:
反正有没有删除这些剩余的碎片？
这是代码:
* {
margin: 0;
padding: 0;
box-sizing: content-box;
}
#container {
display: flex;
align-items: center;
height: 100vh;
}
#box {
position: relative;
width: 150px;
height: 150px;
animation: move 2s infinite alternate ease-in-out;
}
@keyframes move {
0% {
left: 0;
background-color: blue;
border-radius: 0;
}
100% {
left: calc(100vw - 270px);
background-color: red;
border-radius: 50%;
box-shadow:
0 0 0 20px black,
0 0 0 40px cyan,
0 0 0 60px yellow,
0 0 …推荐指数
解决办法
查看次数
固定位置在Safari 7中不起作用
当我滚动而不是移动时,我有一个位于屏幕底部的固定位置div.但是,在Safari上,这个div的行为就像绝对定位一样,并且与其他内容一起上下移动.当我单击"检查元素"时,编程的(所需)位置会突出显示,而不是视觉(实际？)位置.
我无法在小提琴中重现这个问题.这不会发生在Chrome,FF或IE(10+)中.
这是视觉(字符计数框)和编程位置(突出显示区域)之间差异的屏幕截图.
在这些上面还有更多css和html的实际层,但这是直接的代码:
HTML简化了
<article class="parent">
<article class="inner-wrapper">
<div id="counter">
Character Count: <span class="tally">*javascript calculation*</span>
</div>
</article>
</article>
SCSS
article.parent {
max-width: rem(640);
margin: 0 auto rem(30) auto;
padding: 0 rem(10);
#counter {
position: fixed;
border: #888 solid 1px;
bottom: 130px;
left: 10px;
border-radius: 5px;
padding: 10px;
background: rgba(255, 255, 255, .8);
font-size: .8em;
min-width: 150px;
}
}
如何使这个div在Safari中运行,以便视觉位于编程位置的顶部？
推荐指数
解决办法
查看次数
硬件加速css3动画使用-webkit-transform translate3d无法在Samsung Galaxy Tab 10.1上运行
使用硬件加速CSS3标签的动画(参见下面的代码)在Google Chrome PC浏览器和三星Galaxy SIII上的Android浏览器中运行良好.但是,在三星Galaxy Tab 10.1上的Android浏览器上同样不起作用.如何在三星Galaxy Tab设备上实现硬件加速滑入/缩小动画？
<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
border: 1px solid black;
background-color: red;
position: fixed;
left: 0px;
}
#div1.active
{
-webkit-transform-origin: 0% 0%;
-webkit-transition-timing-function: cubic-bezier(0.1, 0.25, 0.1, 1.0);
-webkit-transition-duration:2s;
-webkit-transform: translate3d(-100px,0px,0px);
}
#div1.inactive
{
-webkit-transform-origin: 0% 0%;
-webkit-transition-timing-function: cubic-bezier(0.1, 0.25, 0.1, 1.0);
-webkit-transition-duration:2s;
-webkit-transform: translate3d(0px,0px,0px);
}
#button1
{
position: fixed;
left: 200px;
}
</style>
<script>
var flag = 1;
function myFunction()
{
if (++flag % 2 === 0) {
//alert("active");
document.getElementById("div1").setAttribute("class", "");
document.getElementById("div1").setAttribute("class", …android-browser css-transitions webkit-transform samsung-mobile
推荐指数
解决办法
查看次数