开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在最新的Android Chrome上滚动时，粘滞元素消失/闪烁(85)

在最新的Android Chrome上滚动时，粘滞元素消失/闪烁(85)是一个常见的前端开发问题。这个问题通常出现在使用CSS属性position: sticky来创建粘滞元素时。

粘滞元素是指在页面滚动过程中保持在特定位置的元素。它可以提供更好的用户体验，例如在导航栏中保持菜单始终可见。然而，在某些情况下，特别是在Android Chrome上，滚动时粘滞元素可能会出现消失或闪烁的问题。

这个问题的原因是Android Chrome在处理position: sticky时存在一些bug。为了解决这个问题，可以尝试以下几种方法：

使用-webkit-backface-visibility: hidden属性：将这个属性应用于粘滞元素的CSS样式中，可以解决在滚动时元素消失或闪烁的问题。
使用transform: translateZ(0)属性：类似于上述方法，将这个属性应用于粘滞元素的CSS样式中，可以解决元素消失或闪烁的问题。
使用JavaScript库或框架：一些JavaScript库或框架，如Stickyfill.js或Sticky-kit，可以提供跨浏览器的粘滞元素解决方案，包括解决Android Chrome上的问题。

总结起来，解决在最新的Android Chrome上滚动时粘滞元素消失/闪烁的问题，可以尝试使用-webkit-backface-visibility: hidden或transform: translateZ(0)属性，或者使用JavaScript库或框架来提供跨浏览器的解决方案。

腾讯云相关产品和产品介绍链接地址：

腾讯云移动开发平台：https://cloud.tencent.com/product/mpp
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
腾讯云内容分发网络（CDN）：https://cloud.tencent.com/product/cdn
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
腾讯云存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙（Metaverse）：https://cloud.tencent.com/product/metaverse

请注意，以上链接仅供参考，具体产品选择应根据实际需求进行评估和决策。

相关搜索:修复了google chrome中滚动时旋转元素消失的问题当向上和向下滚动时，在chrome中的Jwplayer闪烁问题在滚动到某一点时使元素粘滞的问题 Android:回收器视图中的水平线视图在滚动时闪烁在Mobile Chrome上禁用画布元素上的默认上下文菜单。(我在Android Chrome上试过)当我在移动设备上上下滚动时，我的技能表不会消失仅当元素在屏幕上不可见时才滚动到可滚动div中的元素在移动设备上滚动元素时，如何隐藏网站上的悬停效果？在android中使用chrome的移动设备中，当我向下滚动模式，地址栏消失时，底部会出现空白。在我的android应用程序中滚动列表视图时，数据正在消失。我在片段中使用列表视图在React中对具有复杂框阴影和文本阴影的元素进行动画移动时，Android Chrome上的性能较差在iOS中，当用户滚动WKWebView时，如何检测屏幕上可见的html元素？-webkit-scrollbar在使用chrome的移动模拟器时的工作方式不同(当scrollbar在html元素上时)为什么当我在API应用程序上滚动到顶部然后向下滚动时，页面顶部的按钮卡顿/滞后/粘滞，但在网页上的行为正常？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

远程调试 Android 设备使用入门

在此页面的顶部，您会看到 Android 设备的型号名称，后面紧跟着其序列号。在型号名称下面，您可以看到在设备上运行的 Chrome 的版本，版本号在括号里。...（9）] 检查元素转到您的 DevTools 实例的 Elements 面板，将鼠标悬停在一个元素上以在 Android 设备的视口中突出显示它。...您还可以在 Android 设备屏幕上点按一个元素，以在 Elements 面板中选中它。点击您的 DevTools 实例上的 Select Element [图片上传中。。。...（10）]，然后在您的 Android 设备屏幕上点按此元素。请注意，Select Element 将在第一次触摸后停用，因此，每次想要使用此功能时您都需要重新启用它。...抓屏的透明部分表示设备界面，如 Chrome 多功能框、Android 状态栏或 Android 键盘。抓屏会对帧率产生负面影响。在测量滚动或动画时停用抓屏，以更准确地了解页面的性能。

1.1K3 0

手把手教你实现前端惰性加载

我们可以在浏览器滚动到一定的位置的时候进行下载，这也就是们通常所说的惰性加载，技术上现实其中要用的技术就是图片懒加载--到可视区域再加载。...2、可以设一个标识符标识已经加载图片的index，当滚动条滚动时就不需要遍历所有的图片，只需要遍历未加载的图片即可。 3、可以在计算的时候，增加偏移数据，提前加载图片，并使用淡入效果，提高流畅性。...=clientHeight时，图片的上沿应该是位于可视区域下沿的位置的临界点，再滚动一点点，图片就会进入可视区域。...也就是说，在 bound.top<=clientHeight时，图片是在可视区域内的。...它兼容性有限， Chrome 51+（发布于 2016-05-25） Android 5+ （Chrome 56 发布于 2017-02-06） Edge 15 （2017-04-11） iOS 不支持

9671 0

iNotify.js 2 实现浏览器的title闪烁滚动声音提示，弹出通知

JS 实现浏览器的 title 闪烁、滚动、声音提示、chrome、Firefox、Safari等系统弹出通知。...}, // 标题闪烁，或者滚动速度 interval: 1000, // 可选，默认绿底白字的 Favicon updateFavicon:{ // favicon 字体颜色...audio: 可选播放声音 file: String/Array 可以使用数组传多种格式的声音文件 interval: Number 标题闪烁，或者滚动速度 openurl: String 点击弹窗打开连接地址...URL iNotify.setURL('msg.mp3') // 设置一个 iNotify.setURL(['msg.mp3','msg.ogg','msg.mp4']) // 设置多个 title 最新的版本默认不播放标题闪烁动画...onclick 每当用户点击通知时被触发。 onshow 当通知显示的时候被触发。 onerror 每当通知遇到错误时被触发。 onclose 当用户关闭通知时被触发。

6.7K5 0

Interection Observer如何观察变化

在Mac上，观察者的差异约为88毫秒，而滚动事件的差异约为300毫秒。在Mac上，每种测试的总体结果都相当接近，但是脚本在滚动事件方面表现出色。对于Windows机器，它要差得多得多。...观察者触发目标元素在根元素内部出现或消失的每一个百分比，以便每当比率更改至少百分之一，此框下方的输出文本将更新。...当目标首次进入根元素时，将创建滚动事件侦听器，然后在目标离开根元素时将其删除。滚动时，输出仅显示每个事件的时间戳，以实时显示事件的变化-比单独的观察者要精确得多。下面是JavaScript。...当我使用Intersection Observer尝试不同的想法时，我确实遇到了两个示例在Firefox和Chrome之间的行为有所不同。我不会在生产站点上使用这些示例，但是这些行为很有趣。...但是，如果我们在目标元素移入和移出根元素时在浏览器中四处移动鼠标，则intersectionRatio确实会更新。我的猜测是，只有在存在某种形式的用户交互时，Chrome才会“激活”观察者。

2.6K2 0

Chrome 61 Beta版已支持JavaScript模块，Web支付API，Web Share API和WebUSB

，Mac和Windows的Chrome Beta最新版本。...在本次发布的版本中通过元素添加了对JavaScript 模块的原生支持。...网站现在可以在Chrome for Android上使用新的navigator.shareAPI来触发原生的Android共享对话框，允许用户轻松地与任何已安装的本地app共享文本或链接。...对于使用原生控件播放的视频，当用户按照与屏幕上播放的视频相匹配的方向旋转设备时，Chrome会自动将视频扩展为全屏。...网站现在可以通过在元素上的csp属性来要求嵌入的第三方内容强制执行给定的内容安全策略。

1.7K6 0

【JS】322- 手把手教你实现前端惰性加载

我们可以在浏览器滚动到一定的位置的时候进行下载，这也就是们通常所说的惰性加载，技术上现实其中要用的技术就是图片懒加载--到可视区域再加载。 ?...2、可以设一个标识符标识已经加载图片的index，当滚动条滚动时就不需要遍历所有的图片，只需要遍历未加载的图片即可。3、可以在计算的时候，增加偏移数据，提前加载图片，并使用淡入效果，提高流畅性。...=clientHeight时，图片的上沿应该是位于可视区域下沿的位置的临界点，再滚动一点点，图片就会进入可视区域。...也就是说，在 bound.top<=clientHeight时，图片是在可视区域内的。...它兼容性有限，Chrome 51+（发布于 2016-05-25）Android 5+ （Chrome 56 发布于 2017-02-06）Edge 15 （2017-04-11）iOS 不支持不过不用担心

9633 0

这一次，彻底解决滚动穿透

什么是滚动穿透如图所示，有一层遮罩蒙层覆盖在body上时，当我们滚动遮罩层，它下面的内容也会跟着一起滚动，看起来好像是上面的滚动事件穿透到下面的DOM元素上一样，我们称之为滚动穿透。...首先，一般而言滚动不是我们自己监听事件去改变元素的位置而实现的，当我们设置 overflow:scroll/auto时，实际上是浏览器原生实现的滚动效果。...在仔细进一步的定位下，最终确定罪魁祸首原来是： passive event 我们知道，chrome 51引入了 passiveeventlisteners以提高滚动性能，同时它也合入了标准，具体可查看chrome...在Android的手q和微信中使用的是X5内核，它是基于blink内核的，因此同样有关于 passiveevent的优化。...这样一来只需要在可滚动的容器上加入 can-scroll类名即可滚动，但是这种滚动又随之带来一个问题：当滚动到元素顶部和底部再继续滚动时，又会触发滚动穿透！

2.7K2 1

应用宝基于Robotium自动化测试(上)

为了支撑项目组的这种研发模式，测试侧需要在FT分支上及主干上做大量的测试，而其中在FT分支的rebase测试、合流后验证、主干灰度测试等等阶段还包括大量的重复性测试，因此有必要在这些环节加入自动化测试，...Window——Preferences——Android——Build，如图1所示，点击Browser，选择应用宝的debug.keystore签名，配置完成后，用Eclipse调试时，测试工程打出的apk...scrollToTop() / scrollToBottom() / scrollUp() / scrollDown()滚动至顶部 / 滚动至底部 /向上滚动屏幕 / 向下滚动屏幕 boolean.../devtools/docs/remote-debugging#reverse-port-forwarding 然后，在Chrome浏览器地址栏中输入“chrome://inspect/#devices...图11.解压aar文件如图12所示，应用宝在通知栏中开启了快捷工具栏，测试此功能时需要开启通知栏，并点击工具栏中的按钮，这样的操作仅通过Robotium框架是无法完成的，此时就可以结合UiAutomator

2K6 0

页面中元素的吸顶

[需求] 滚动页面到顶部，实现某元素固定到顶部效果点击某个按钮，页面滚动到相应的位置滚动页面，当到达某个位置时，高亮对应的相关按钮 [元素吸顶实现方式] 关于元素吸顶效果，通过查阅相关资料和相关测试...sticky元素效果完全受限于父级元素，使用条件： sticky元素的父元素的overflow只能设置为visible，否则会导致没有粘滞效果 sticky元素的父元素不能设置固定的高度，否则会导致没有粘滞效果...sticky满足条件变成fixed定位时，与标准fixed元素不一样，不会脱离文档流 sticky 定位的元素不能添加一个只包含自身的父元素,会导致没有粘滞效果同一个父级元素中的sticky元素，如果定位值相等...因此我们需要注意的是，在监听页面滚动的过程中，需要将定位父级元素的偏移量也计算在内，可以如下写法： //获取当前元素的offsetTop getOffsetTop(obj) {...的mounted生命周期函数中添加监听事件滚动的事件： mounted() { /**通过给变成固定定位的元素添加一个同等高度的父元素，防止该元素变成固定定位时，脱离文档流导致的页面抖动 */

1.2K3 0

安卓应用安全指南 4.2.3 创建使用广播接收器高级话题

4.0 4.2.3.1 结合导出属性和意图过滤器设置（用于接收器）表 4.2-3 展示了实现接收器时，导出设置和意图过滤器元素的允许的组合。...表 4.2-3 可用与否，导出属性和意图过滤器元素的组合导出属性的值 True False 意图过滤器已定义 OK 不使用意图过滤器未定义 OK OK 未指定接收器的导出属性时，接收器是否为公共的...：类型特性普通普通广播发送到可接收的广播接收器时消失。...因此，当不需要粘性广播时，需要显式调用removeStickyBroadcast()来删除粘滞广播。此外，带有特定权限的受限的广播接收器无法接收广播。...due to sender org.jssec.android.broadcast.sending (uid 10158) 4.2.3.6 在主屏幕放置应用的快捷方式时，需要注意的东西在下面的内容中

1K1 0

毛玻璃 CSS 特效的兼容性方案探究

前一段时间在某项目中用到了“高斯模糊”的滤镜效果，过程中尝试了多种方案，这里总结一种方式，希望可以帮助到有需要的道友～ UI 小姐姐非要让我在 Android 系统自定义的 Webview 上支持实现我们俗称的...Chrome 浏览器看着效果还可以：然后再到某台老 Android 版本的移动端上看看，结果不行了！！！...，这样当元素在任意方向滚动的时候，背景图不会移动，能保证背景效果是一致的移动时候的效果 3.2 利用 margin 属性的负值扩大容器模糊度的效果如下图，还是有差异，因为 filter 是从容器外边框向内聚合的一个滤镜...: -20px; } 此时的效果就有点“那个意思了”，看来快可以交差了 3.3 ::after 填补消失的背景色原本设置在 .card-filter 类上的 background-color: rgba...知道了原因，那么我们就可以在 .card-filter 元素内再添加一个子元素（伪类），用于设置背景色！再偷个懒，直接使用 ::after 伪类，就不用改造 DOM 结构。

1.7K1 0

简单了解下无障碍设计模式

添加可隐藏的字幕，或其他视觉元素来作为重要声音元素和声音警报的替代方案。通过在 UI 元素上添加描述性的标签，使用户可以通过声音在应用中导航。...为了使具有运动和视觉敏感性的用户能舒适地使用界面，请遵循 Material Design 运动规范，该规范支持 W3C 的以下运动指南：如果内容持续移动、滚动或闪烁的时间超过 5 秒，则会暂停、停止或隐藏...在 1 秒内，内容的闪烁次数限制为 3 次，以满足闪烁和红色闪烁的阈值避免闪烁屏幕中较大的中心区域定时控件应用中的控件可以设置为在一定时间后消失。...例如，播放视频 5 秒后，播放按钮控件可能会从屏幕上淡出。高优先级的控件避免在有高优先级功能的控件上使用定时器，因为如果这些控件消失的太快，用户可能不会注意到这些控件。...例如，Android 的 “双击以选择” 功能提示用户在选择一个项目时需要点击两次。Android 的 TalkBack 也会提醒和元素相关联的任何自定义操作。

4.8K4 0

移动端常见问题解决方案

})() 样式初始化css： normalize.css – 官网下载 normalize.css – github 三、meta标签设置适应移动端不对网站进行缓存多核浏览器,优先使用最新版本的...IE 和 Chrome 内核添加到主屏幕时隐藏地址栏和状态栏（即全屏）当我们将一个网页添加到主屏幕时，会更希望它能有像 App 一样的表现，没有地址栏和状态栏全屏显示，代码如下：该方案在 iOS...和 Android5.0+ 上都通用。...遮罩层滚动问题在有遮罩层的情况下，遮罩层下方的内容依然可以透过遮罩层滚动，因此要取消这种操作 (function(){ var scrollTop = 0; // 显示弹出层...$('.open').click(()=>{ // 在弹出层显示之前，记录当前的滚动位置 scrollTop = getScrollTop(); $('.workflow-modal

1.2K1 0

2017移动前端的一些总结web前端 —— 移动端知识的一些总结一.css部分二.js部分

另外一种情况（一般在页面内容很少时 iphone5及以上常发生），当输入框弹出时 fixed元素挤到输入框上，当输入框消失时， fixed元素并没有随着输入框的消失而回到底部，这是因为整个视窗的高度还保持在...;line-height:1.5rem;overflow:hidden;时，在某些 android手机上可能会出现显示不止两行,第三行会显示点头部。...（这个没用过） ③ 有的时候比如弹出一个 iphone上滑动出来的层，点击黑色半透明区域弹出层消失，这种可以在黑色区域绑定 touchend也是和 tap差不多的效果 7.当弹窗出现时，想禁止屏幕的滑动...jpeg,image/gif" ，同时在 android上默认不能使用相机，可以加 capture="camera" 同时，由于原生的样式不好看，可以通过设置input的display:none,然后使用...4.微信 jssdk里预览图片接口，图片的 url不能填 base64编码， ios上会很卡，估摸着微信得卡个 5秒左右才打得开，而 android上压跟就卡住或者一直卡在读取图片界面 5.微信当在输入框里输入消息时

3.7K4 0

深入理解图片和框架的原生懒加载功能

总共要三个步骤，还必须得按顺序执行：加载初始的 HTML 响应内容加载懒加载库加载图片如果把这样的懒加载技术应用到头版中的图片上，页面在加载期间会发生闪烁，因为一开始绘制的时候，页面中没有图片（...懒加载到底有多「懒」，这应该由浏览器来解释，而说明文档表明，懒加载始于用户将页面滚动到图片附近之时，意即当图片即将进入视野时加载。..."> 浏览器支持在撰写本文时，还没有浏览器默认支持原生懒加载功能。但就像之前说的，Chrome 从 77 版本开始会默认开启懒加载。除此之外，目前还没有浏览器厂商宣称支持该功能。...该功能基本上利用了这个原理：即使后来 src 特性的值会被另外的 URL 替换掉，浏览器还是会在一开始就立刻加载 img 元素。...想想吧，随着在不同的 Chrome 平台中逐渐推广、 auto 值成为默认选项，世界上最流行的浏览器即将对视口外的图片和框架应用懒加载技术。

8513 0

WebView深度学习（二）之全面总结WebView遇到的坑及优化

当涉及到混合式内容时，WebView会尝试去兼容最新Web浏览器的风格；另外：在认证证书不被Android所接受的情况下，我们可以通过设置重写WebViewClient的onReceivedSslError...硬件加速关闭时，作用同software。硬件加速打开时会在FBO（Framebuffer Object）上做渲染，在进行动画时，View树也只需要画一次。...当我们做类似上拉加载下一页这样的功能的时候，页面初始的时候需要知道当前WebView是否存在纵向滚动条，如果有则不加载下一页，如果没有则加载下一页直到其出现纵向滚动条。 ...得到的是滚动把手自身的高，当不存在滚动条时，两者的值是相等的。...当有滚动条时前者一定是大于后者的。

5.9K3 0

打造H5动感影集的爱恨情仇(动画性能篇) - 腾讯ISUX

Rendering Rendering处于开发者工具的隐藏面板中，打开Chrome开发者工具然后按ESC键打开。它有四个功能：开启绘制闪烁提示。...这功能会让页面在渲染的时候闪烁绿色，你可以借此增删元素查看哪些元素是绘制消耗最大的。...这功能是使页面滚动变得缓慢，对触摸和滚动事件的监听会使滚动延迟，可以通过这个功能查看滚动时期的瓶颈。...2.前景放大动画在邀请函模板里有一个前景由小变大的动画，但是在安卓机上产生了严重的渲染异常，如下图：在IOS机器上没有重现，循例我查看了timeline。发现上面也没有异样，性能还是能保持流畅。...感谢你的阅读，本文由腾讯ISUX 版权所有，转载时请注明出处，违者必究，谢谢你的合作。

1.3K4 0

移动端那些戳中你痛点的软键盘问题及解决方法

大厂技术坚持周更精选好文问题问题描述：在ios手机中，当页面中包含有输入框时，点击输入框，键盘弹起，会让页面中被fixed的元素失效。所以造成了底部吸底和顶部吸顶的元素错位的问题。...Android 软键盘弹起表现同样，在 Android 上，输入框获取焦点，键盘弹起，但是页面（webview）高度会发生改变，一般来说，高度为可视区高度（原高度减去软键盘高度），除了因为页面内容被撑开可以产生滚动...同样参考这篇文章：WebView上软键盘的兼容方案[3] 综合上面键盘弹起和收起在 IOS 和 Android 上的不同表现，我们可以分开进行如下处理来监听软键盘的弹起和收起： Ios 在 IOS 上，...在 Android 上，监听 webview 高度会变化，高度变小获知软键盘弹起，否则软键盘收起。 // IOS 键盘弹起：当输入框被聚焦时IOS键盘会被弹起 inputRef?....2、吸底元素（也就是按钮）能够在键盘弹出之后，出现在键盘的上方对于这个问题，因为安卓表现是webview缩小，所以在安卓上并不存在这个问题，对于ios，因为ios向上滚动的距离最大是键盘的高度，但是也有可能滚动距离不是键盘高度

8.5K3 0

打造H5动感影集的爱恨情仇【动画性能篇】

Rendering Rendering处于开发者工具的隐藏面板中，打开Chrome开发者工具然后按ESC键打开。 ? 它有四个功能：开启绘制闪烁提示。...这功能会让页面在渲染的时候闪烁绿色，你可以借此增删元素查看哪些元素是绘制消耗最大的。...这功能是使页面滚动变得缓慢，对触摸和滚动事件的监听会使滚动延迟，可以通过这个功能查看滚动时期的瓶颈。 ?...2.前景放大动画在邀请函模板里有一个前景由小变大的动画，但是在安卓机上产生了严重的渲染异常，如下图： ? 在IOS机器上没有重现，循例我查看了timeline。...z-index设置不当兄弟元素在复合层中渲染，且z-index比主元素小，则主元素也会被加入到复合层渲染。有篇文章就是说这个问题。解决办法：给作用于动画的兄弟元素设置合理z-index值。

1.6K12 1

前端面试01-HTML+CSS

chrome Chromium/Blink 在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。...大部分国产浏览器最新版都采用Blink内核。二次开发 Opera blink Presto（已经废弃）是挪威产浏览器 opera 的 “前任” 内核,现在跟随chrome用blink内核。...因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 sticky 粘性定位(而sticky相当于加了一个滚动事件的处理，当页面滚动到相对应的元素上，就会变成固定定位的效果。...当滚动到父元素不在可视区域范围内时，定位效果就会消失。) static 默认值。没有定位，元素出现在正常的流中 10.display:inline-block 什么时候不会显示间隙？...将子元素放置在同一行为父元素中设置font-size: 0，在子元素上重置正确的font-size 为inline-block元素添加样式float:left 设置子元素margin值为负数 11.你对

6762 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭