Trung tâm cá nhân
sách gpt4 ai đã đi

CSS 转换/转换 - 谷歌浏览器中的 "shaky"图像

In lại 作者：行者123 更新时间：2023-11-28 15:53:22 27 4
mua khóa gpt4 Nike

最近我遇到了“不稳定”屏幕，这很可能是由 CSS 转换引起的。事实上，它只发生在 Chrome 浏览器 上(可能还有 Safari，因为一些人也报告了它)。知道如何让它看起来光滑吗？此外，您可能会注意到几次出现奇怪的白色 block ，这在我应用转换之前也没有发生，现在在页面重新加载后发生一两次。

这是一个链接，您可以查看到底发生了什么: https://vimeo.com/198493320

过渡的 CSS 代码:

.heroEffects .bg {
    transform: scale(1);
    -webkit-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78);
    -moz-box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78);
    box-shadow: inset 4px 1px 77px 40px rgba(0,0,0,0.78);
    vị trí: tuyệt đối;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
.bgimg {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    vị trí: tuyệt đối;
    background-repeat: no-repeat;
    background-position: center center;
    transform: scale(1);
    overflow: hidden;
    -webkit-box-shadow: inset 0px 0px 97px 69px rgba(0,0,0,0.85);
    -moz-box-shadow: inset 0px 0px 97px 69px rgba(0,0,0,0.85);
    box-shadow: inset 0px 0px 97px 69px rgba(0,0,0,0.85);
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: url("../img/gallery/slonecz.jpg");
    animation-name: backgroundchangeFadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    -webkit-animation-name: backgroundchangeFadeInOut;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 15s;
}

1 Câu trả lời

实际上，我只是发现了几种让它正常工作的方法。首先，将 -webkit-transform-style: preserve-3d; 规则添加到闪烁元素使其工作稍微稍微好一点，但在我的情况下它之后并没有完美工作(来源: https://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit ).

真正对我有用的是将 animation-duration 规则从 10 秒增加到 15 秒，而不是 3 步过渡我放了以下内容:

@keyframes backgroundchangeFadeInOut {
    0% {
       background-image: url("../img/gallery/slonecz.jpg");
    }
    15% {
       background-image: url("../img/gallery/slonecz.jpg");
    }
    30% {
       background-image: url("../img/gallery/slonecz.jpg");
    }
    45% {
       background-image: url("../img/gallery/slonecz.jpg");
    }
    50% {
       background-image: url("../img/gallery/motyl.jpg");
    }
    65% {
       background-image: url("../img/gallery/motyl.jpg");
    }
    80% {
       background-image: url("../img/gallery/motyl.jpg");
    }
    95% {
       background-image: url("../img/gallery/motyl.jpg");
    }
    100% {
       background-image: url("../img/gallery/slonecz.jpg");
   }
}

似乎单个转换花费大量时间会导致浏览器内存出现故障和闪烁。快速过渡和在过渡之间显示原始图像对我来说很有用。希望遇到此类问题的人也能检查一下，以便我们了解它是否是多案例解决方案。

此外，如果出现白色 block ，由于某种原因它似乎是 thân hình，暂时将 body 背景不透明度更改为 0，直到我找到另一种解决方法

关于CSS 转换/转换 - 谷歌浏览器中的 "shaky"图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41525457/

27 4 0
Bài viết được đề xuất: javascript - 使用 javascript 和 jQuery 添加表
Bài viết được đề xuất: css - 属性 "-fx-background-insets"是什么意思及其参数的所有含义
Bài viết được đề xuất: javascript - 为什么 $ 在 jQuery 版本 1.4.2 中不被识别？
Bài viết được đề xuất: ios - 二进制表达式 ('CGFloat'(又名 'double')和 'UIView * _Nullable' 的无效操作数)
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com