谷歌浏览器 fixed 出现bug

最新推荐文章于 2024-11-07 17:07:19 发布
原创 最新推荐文章于 2024-11-07 17:07:19 发布 · 885 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种解决谷歌浏览器中CSS3 Animation与fixed布局元素导致的闪烁问题的方法。通过使用-webkit-transform:translateZ(0)触发浏览器重绘，可以有效避免此渲染bug。
部署运行你感兴趣的模型镜像

在谷歌浏览器，当页面有css3 animation 且有 fixed块的时候，fixed块在页面滚动的时候会出现fixed块闪动

这种bug算是页面交互渲染这类问题，试着触发浏览器的重绘。

webkit/blink内核渲染bug修复神器，webkit 的 haslayout:    -webkit-transform:translateZ(0); 完美搞定。

您可能感兴趣的与本文相关的镜像

AutoGPT

AutoGPT

AI应用

AutoGPT于2023年3月30日由游戏公司Significant Gravitas Ltd.的创始人Toran Bruce Richards发布,AutoGPT是一个AI agent（智能体），也是开源的应用程序，结合了GPT-4和GPT-3.5技术，给定自然语言的目标，它将尝试通过将其分解成子任务，并在自动循环中使用互联网和其他工具来实现这一目标

Google 谷歌浏览器 启动 命令 参数 大全
猫头虎技术团队：授渔优于赠鱼，兴趣引领智慧，探索之乐尤显珍贵。商务合作+：Libin9iOak ，万粉变现+：优快云WF，猫头虎承诺每年免费为100名C站创作者做账号流量诊断服务！全网搜：猫头虎技术团队，点击文章底部名片或直接私信我一切皆可谈，快找虎哥！
12-20 4069
在开发Web项目当中，浏览器必不可少，而浏览器的启动参数可以帮我们实现很多功能。常用参数请参考下表。由于水平有限，下表为网络翻译，了解跟多可根基参数，查找相关资料。​如果这篇文章对您有所帮助，或者有所启发的话，求一键三连：点赞、评论、收藏➕关注，您的支持是我坚持写作最大的动力。
软件测试BUG篇
2201_75880772的博客
02-03 905
软件测试的生命周期,以及BUG的一些概念
找bug记(转)
问道江湖
03-28 204
上周在线上系统发现了两个bug，值得记录下查找的过程和原因。以后如果还有查找bug比较有价值的经历，我也会继续分享。    第一个bug的起始，是在线上日志发现一个频繁打印的异常——java.lang.ArrayIndexOutOfBoundsException。但是却没有堆栈，只有一行一行的ArrayIndexOutOfBoundsException。没有堆栈，不知道异常是从什么地方抛出来的，也...
iOS下的 Fixed BUG
weixin_34357436的博客
10-27 174
input 光标位置乱窜 固定式浮层内的输入框光标会发生偏移。即fixed定位的容器中输入框光标的位置显示不正确，没有正常地显示在输入框中，而是偏移到了输入框外面 可触发条件 页面body出现滚动条 点击页面出现用fixed定位的弹框，弹框内有输入框，键盘弹起，页面发生滚动 键盘弹起后手动滚动页面 通过调试工具发现键盘弹起视图...
bug fixed 系列之一：前言
啃骨头的小蚂蚁
01-24 1321
本文章为原创，欢迎交流，欢迎转载；转载请勿篡改内容，并且注明出处，禁止用于商业目的，谢谢！
css3 animation 在某些浏览器中特别快 bugfix
weixin_33938733的博客
11-09 302
今天在一款三星 4.2.2 的 webview 里，出现 animation 特别快的问题，把： .xxx{ -webkit-animation: xxx 24s linear infinite; } @-webkit-keyframes xxx { 0% { -webkit-transform: translate(0, 0); } ...
javascript toFixed() 方法BUG的解决办法
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
06-08 2300
toFixed() 方法使用定点表示法来格式化一个数值。简单点来说，就是对数据进行四舍五入的处理，定点表示要保留的小数位数。 toFixed() 方法BUG的解决办法，详细内容请阅读小编的原创文章《javascript 写后端前必须要知道的事》， 文章地址：https://blog.youkuaiyun.com/u013350495/article/details/91345674 作...
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
12-09
然而，在某些IE浏览器版本中，其内置的`fixed column`功能存在一些bug，导致冻结的列内容无法正常显示。这个问题主要出现在IE10和IE11等较旧的IE浏览器版本中。 **问题描述** 当表格列数量超过屏幕宽度时，表格会...
javascript中toFixed()四舍五入计算bug，及解决方法，四舍六入，五看奇偶并不精准，重新toFixed方法才是万全之策呀
weixin_48228930的博客
02-23 1889
问题描述： 最近做一个项目涉及金额计算保留两位小数，以前一直以为toFixed方法就是四舍五入的，上线后用户用户反馈计算出来的金额少了一分钱，跟其票面金额不一致，深入研究后发现使用toFixed保留两位小数是大坑呀。 请看下面的例子： 3.135.toFixed(2) **本以为是3.14，然而却是3.13！！！** 网上有人整理出toFixed方法“四舍六入，五看奇偶”的原则： 当舍去位的数值 < 5时，直接舍去 当舍去位的数值 >= 6时，在舍去的同时向前进一位 当舍去位的数值
历时四年，给Google提交的Android Framework Bug终于被Fixed了
voidreturn的博客
03-30 2373
历时四年，Google终于修复了一个我发现的Android Framework Bug 2014年在做一个Android终端设备开发过程中，发现了一个Android Framework层的Bug，给Google提交了issue和解决方案，和外界传言一致Google一般不太在意个人开发者提交的issue，直到2017年12月，再次提交了issue，在几轮沟通无果下，忍不住喷了Google几句...
一个bug至今没有fixed
SophieZhou的专栏
03-05 744
程序中，不知道是什么地方存在bug。是这样的，我在生产环境下运行时，总是会出现丢数据的问题。可如果我跑了一遍后，再运行一遍就没问题。这是个奇怪的问题吧。 曾经试验过，在生产环境下，另外运行一次，也不丢数据，用我自己的用户名运行一次也不丢数据。但是如果在生产环境下第一次运行就会发生丢数据的现象。 要是说，生产环境的问题，可我就在生产环境下再次运行时就换个时间和输出路径就没事了。用我自己的
position:fixed在chrome浏览器中无效
艾瑞-Arin
01-08 1286
在项目制作过程中发现position:fixed突然无效，后发现是因为父级div使用了css3中的transform:translateZ(0)属性，导致webkit内核的浏览器使用transform:translateZ(0)属性时，position:fixed无效。
谷歌Chrome fixed定位 锚点跳转闪一下BUG
weixin_30364147的博客
04-08 473
今天遇见了Chrome下的一个bug，就是右边跳转导航定位是fixed，跳转用的是锚点跳转，点击跳转时导航会闪一下，火狐和ie下正常，谷歌上找了一下，发现解决办法：给html,body{height:100%; overflow:auto;},附上求助的网址http://stackoverflow.com/questions/11258877/fixed-element-disappears-in...
MacType渲染问题
Learning
11-21 1238
问题提出：最开始所有的都可以渲染的非常好，除了谷歌浏览器和部分软件渲染有问题，谷歌浏览器出现的问题是，页面内容无任何渲染效果，部分软件由于字体的原因会出现字体不完整，像被切掉顶部似的。为了解决该问题，百度了很多，最后还是把问题解决了，这只是个人初步解决方案，供大家参考，不喜勿喷！   谷歌浏览器问题解决： 在浏览器中输入chrome://flags，找到下图中的一项，将其置为停用，开始有...
elment ui table表格fixed固定列之后渲染行错位 --踩坑
林中明月间丶
11-07 414
那在什么时机调用这个方法呢？既然是对 Table 的重新布局，肯定要先拿到 Table Dom节点，所以可以在。当我切换路由的时候，Table 由显示切换为隐藏，所以调用这个方法可以触发 Table 的重新布局。里面调用，也就是确保 Table 挂载完成，能拿到实例，才能触发这个方法。所以可以在获取到数据之后，加上这一段代码，
前端学习（38）：css颜色小练习
歌谣的博客
12-07 509
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
Chrome浏览器下fixed元素抖动的解决方案
lqy455949477的博客
11-29 3529
2018/02/08更新 translate3d和matrix3d的作用是强制调用GPU渲染效果，比CPU渲染的效果更好，同时也不会引起z轴位置的错位。 首先要说明的是，这个问题并不是在所有浏览器下存在，而且也不是在所有chrome浏览器版本中存在。就目前chrome 62.0版本中，确实存在这个问题。 这个问题的现象是，首先定义了一个fixed元素（通常拥有较高的z-index），比如...
只在新版谷歌浏览器有这种问题
最新发布
10-15
解决 Element UI 右侧固定列在新版谷歌浏览器上下滚动时出现穿透或残影兼容性问题，可尝试以下方法： ### 滚动条及固定列样式调整 调整滚动条样式，同时对固定列底部的伪元素样式进行修改，避免滚动时出现残影。示例代码如下： ```css /* 设置滚动条的样式 */ /deep/::-webkit-scrollbar { width: 10px !important; height: 10px !important; background-color: #8487879e; } /deep/ .el-table__fixed::before, .el-table__fixed-right::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: unset; z-index: 4; } ``` ### 利用 pointer-events 属性 通过设置 `pointer-events` 属性，控制固定列和单元格对鼠标操作的响应，避免滚动时出现穿透问题。示例代码如下： ```scss <style lang="scss" scoped> ::v-deep.table { // 滚动条高度调整 ::-webkit-scrollbar { height: 10px; } .el-table__fixed, .el-table__fixed-left, .el-table__fixed-right { pointer-events: none; td { pointer-events: auto; } } } </style> ``` ### 数据加载完成后重新布局表格 在数据加载完成之后重新布局表格，确保表格元素的位置和大小正确，避免出现错位和残影。示例代码如下： ```javascript init() { // 调用接口获取到数据后 let _self = this; this.$nextTick(() => { window.setTimeout(() => { // _self.$refs.你的el-table的ref.doLayout() _self.$refs.tableref.doLayout(); }, 100); }); } ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值