backdrop-filter:blur 导致滚动条 动画卡顿

最新推荐文章于 2024-05-09 15:49:41 发布
最新推荐文章于 2024-05-09 15:49:41 发布
阅读量684 收藏
点赞数
文章标签： 前端 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37550593/article/details/128792582
版权

某项目中用了backdrop-filter:blur 元素做底图导致滚动条动画效果卡顿情况，没特别需要别用backdrop-filter:blur。

海之蓝心
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css动画使用背景图片卡顿_css3 animation && filter: blur()引发的动画性能问题排查...
weixin_42504327的博客
11-29 1049
这篇文章记录了自己排查动画问题时的思路，最后的解决有一些侥幸，也是因为最近刚好学习了部分安卓代码，技术视野稍微开阔了些查看更多blog​github.com 我们在工作中经常会遇到一些动画卡顿的问题，往往是一些性能比较差的安卓手机，笔者最近就遇到了这样的情况，这里也记录下本次排查问题的过程。 因为页面并不复杂，所以看到页面动画卡顿之后，能够很快速的猜想到是哪些css属性引...
react-backdrop-filter:React Backdrop Filter是使实验背景滤镜与画布配合使用的快速简便方法
05-19
React背景过滤器 React Backdrop Filter是一种向您的应用程序添加漂亮的背景滤镜的快速简便的方法。... import BackdropFilter from "react-backdrop-filter" ; render ( ) { return ( < div cla
css卡片——毛玻璃特效，backdrop-filter的性能问题记录
swallowblank的博客
12-15 2336
今天在youtube上看到了一个关于使用css完成毛玻璃特效的视频。 很奇怪的一点是，在card上加入了backdrop-filter之后，card上的所有过渡动画肉眼可见的不流畅，在用titl.js之后更是卡的不行。 backdrop-filter: blur(5px); 当去掉这个属性以后，整个页面极其流畅。 ...
css backdrop-filter 实现背景滤镜
最新发布
jinse29的博客
05-09 432
官方给出的定义是：backdrop-filter属性允许您将图形效果（如模糊或颜色偏移）应用于元素后面的区域。的所有内容，所以要查看元素或其背景的效果，需要透明或部分透明。根据上述10种，做了一张汇总图。同样直接贴一下源码吧。
backdrop-filter
weixin_48785875的博客
07-21 574
背景模糊效果等
backdrop-filter css的性能杀手
weixin_43561423的博客
05-15 1488
使用毛玻璃效果时，滚动滚动条时页面卡顿、空白
css3 背景模糊属性 背景滤镜 backdrop-filter
热门推荐
belladong126的博客
12-01 1万+
设计问我前端能否实现背景模糊的遮罩效果，我想我们应该感谢那些强大的css3开发者们，因为他们的努力才使得我恰好知道这个属性： backdrop-filter: blur(8px); 翻译理解记忆法仅供参考：背景幕布-过滤器 : 模糊(像素) backdrop-filter与filter的区别 filter：模糊内容 backdrop-filter:透过该层的底部元素模糊化 防止透过遮罩层内容过暗，配合了saturate(150%)使用，意为使…饱和，类似ps饱和度效果，<100%变暗，>10
两句css 搞定页面滚动时的卡顿问题？
tager168的博客
10-23 3185
前言 对于网页的卡顿性能优化，我们首先想到的肯定是从JavaScript开始。但这个锅js表示不背????，但不是js的原因又会是什么原因了？文章内容不多，只要你能仔细看完，相信一定能对你有所帮助。 在实际项目中React、Vue、Angular三大框架都有使用过，其在开发效率上是毋庸置疑的，但在某些场景上其性能确是差强人意的。如果大家有遇到此类场景，欢迎在下方留言讨论。 下面我们一起来了解一下实际项目中遇到的此类性能瓶颈是如何处理的! 背景 项目基于VUE，由于业务要求需要长列表渲染(不能做动态加载和虚拟
Material-Backdrop-Android：材质背景
02-03
implementation 'com.github.kishan2612:Material-Backdrop-Android:v1.1.0' } 在布局中包含小部件 <com.evolve.backdroplibrary.BackdropContainer android:layout_width="match_parent" android:layout_...
backdrop-issues:Backdrop核心的问题跟踪器
05-03
如果您发现Backdrop CMS的安全问题，请直接通过与Backdrop安全团队联系。 我们将在专用存储库中单独管理安全问题，直到问题解决为止。 即使您不确定这是否是安全问题，也请在提交问题之前与安全团队联系。 其他相关...
详解filter与fixed冲突的原因及解决方案
11-21
当在 body 中使用了 filter 滤镜属性的时候，会导致 fixed 元素定位发生错误，即不再相对 viewport 进行定位，而是相对整个网页（ body 元素）进行定位。 <html> <head> <title>css filter ...
backdrop-theme:响应式Pelican静态博客引擎主题
05-13
背景鹈鹕主题这是静态网站生成器的主题。 它基于 （由定制）。... 我想自定义Backdrop，也许像我最初设计时那样考虑使用和 。 请参阅背景主题存储库。 兼容插件这个主题已经被设计为使用representative_image插件。 但
最纯粹的直播技术实战03-通过filter进行旋转及卡顿修复
Miracle的专栏
02-26 3740
这个系列的文章将会研究最纯粹的Android直播的实现，而且不是用现在的集成SDK来达到直播的技术实现，而是从一个比较底层的直播实现来探讨这个技术，这样子对于直播技术的实现，现成的一些直播框架等都有一个比较好的理解。
css：使用filter和backdrop-filter实现高斯模糊效果
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
03-08 4873
css：使用filter和backdrop-filter实现高斯模糊效果
移动端ios屏幕滚动时css样式filter属性发生抖动闪烁bug
細水、長流√的专栏
09-07 384
安卓上一切正常，ios经测试下发现屏幕滚动时候出现抖动闪烁甚至空白的问题，百度谷歌百般求助无果，后来试了下给。个人理解是fliter属性会有一些transition动画，滑动的时候ios引擎渲染优化的不好。加了个overflow:hidden;属性万岁一切正常了。所以最终css改为如下就好了。
CSS3知识点
weixin_51186587的博客
03-28 172
1.盒子模型 1. box-sizing：content-box； 默认的盒子 即大小为width+padding+border 2. box-sizing:border-box; 盒子大小为width，padding和border不会撑大盒子 2.其他特性（了解） 1.滤镜filter 用于模糊或颜色偏移 filter：函数（）； 例如：filter：blur(5px);为blur模糊处理，数值越大越模糊 2.calc函数 例如:width:calc(100%-80px); ...
backdrop-filter: blur() safari 浏览器 无效 解决
TGODS
04-02 7564
遇到的问题：通过动画设置 backdrop-filter，Safari 浏览器没效果，win正常 我查找到的原因： 设置 backdrop-filter 的元素 高度初始 是0，通过动画 设置的高度，Safari就没效果。 解决方法： 第一种：高度设置100%，在父级上 做 高度动画 （可行） 第二种：初始高度 不为0，在设置 高度动画（未测试，没mac，一直劳烦同事怕被打 ๑乛◡乛๑） 下面是 Safari 无效代码： <!DOCTYPE html> <html lan
backdrop-filter: blur不生效
06-28
### 回答1： 可能是以下原因导致backdrop-filter: blur不生效： 1.浏览器不支持该属性。请检查您的浏览器是否支持backdrop-filter属性。 2.元素没有设置position属性。backdrop-filter属性只能在position属性设置为fixed或absolute的元素上生效。 3.元素没有设置背景。backdrop-filter属性需要在有背景的元素上才能生效。 4.元素的z-index值太低。请检查元素的z-index值是否低于其他元素，这可能会导致backdrop-filter属性不生效。 5.元素的父级元素设置了overflow:hidden属性。如果元素的父级元素设置了overflow:hidden属性，那么backdrop-filter属性可能会被裁剪掉。 希望以上解答能够帮助您解决问题。 ### 回答2： Backdrop-filter:blur是一种CSS属性，它允许开发人员为一个元素添加一个模糊化的背景效果。使用这个属性可以在某些情况下为网站带来一些独特的视觉效果。 当使用这个属性时，有几个问题可能会导致它不生效。以下是一些常见的原因及其解决方案。 1. 浏览器兼容性问题 Backdrop-filter:blur是一个比较新的CSS属性，不是所有的浏览器都支持它。如果你的网站的大部分访问者使用的是旧版的浏览器，那么这个属性可能不会生效。在这种情况下，你可以考虑使用其他的CSS属性或者检查是否有可以使用的Polyfill。如果你确信这一点是原因，你可以通过在代码中添加一个浏览器前缀来尝试解决这个问题。 2. 使用了不正确的语法 Backdrop-filter:blur是一个相对易于使用的CSS属性，但是在使用它时仍然需要注意语法的正确性。如果在使用时出错了，它可能会导致属性效果不生效。你可以检查你的CSS代码是否使用了正确的语法。如果你不确定正确的语法是什么，可以参考CSS规范或查找一些相关的CSS属性教程。 3. 非透明元素 如果你要为一个非透明元素添加Backdrop-filter:blur效果，那么这个属性可能不生效。这是因为Backdrop-filter属性只能在透明元素上生效。在这种情况下，你可以尝试设置元素的opacity属性以使元素变得半透明从而使Backdrop-filter:blur属性生效。 4. 动画效果影响 请注意，Backdrop-filter:blur属性是一个比较昂贵的属性，会消耗更多的计算资源，尤其是在有动画效果的时候。如果你在网站上使用Backdrop-filter:blur属性的同时有其他的动画效果，则可能导致这个属性不生效。在这种情况下，你可能需要考虑进行优化或重新设计一下你的网站。 总之，Backdrop-filter:blur是一个非常有用和独特的CSS属性，但是在使用时需要注意一些细节。如果你遇到了这个属性不生效的问题，可以尝试检查浏览器兼容性、语法正确性、元素透明性和动画效果是否存在问题。 ### 回答3： backdrop-filter: blur 是CSS3新增加的一个功能，它可以对一个元素的背景进行模糊处理，让前景元素更加突出，从而提升页面的可视性。但是，在实际使用中可能会遇到background-filter: blur不生效的问题，下面就来探讨一下可能的原因和解决方法。 首先，要注意的是，backdrop-filter: blur 是一个比较新的样式属性，不是所有的浏览器都支持，尤其是老旧浏览器，如IE浏览器，就不支持这个属性。因此，在使用这个属性的时候，要针对不同的浏览器做兼容性处理。可以通过使用兼容性前缀或者检测浏览器是否支持该属性来解决这个问题。 其次，backdrop-filter: blur 模糊度的效果还与背景色、透明度等相关属性值有较大关系。一些颜色比较浅或者透明度比较高的背景色，会使得backdrop-filter: blur 样式的效果不明显。此时，可以尝试改变背景色或者调整透明度值来达到更好的效果。 还有一种情况是，可能是其他元素遮挡了背景元素，导致backdrop-filter: blur 样式无法生效。此时，可以在需要模糊的元素之前添加一个“空白”的元素，并设置position为absolute或fixed来避免其他元素遮挡。 最后，也是最常见的问题之一，就是在样式表中写错了属性名或值。在使用backdrop-filter: blur 样式时，要注意正确的写法，如拼写、大小写、参数等有没有错误，否则也会导致样式效果无法生效。 总之，backdrop-filter: blur 样式虽然使用起来非常方便和美观，但是要千方百计地去解决一些可能出现的问题，以确保样式生效。要根据具体情况，从多个方面出发，进行调试和处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值