固定元素在 Chrome 中消失

2023-11-21

当在我构建的网站上滚动时,使用 CSS 属性position: fixed按预期工作,将导航栏保留在页面的最顶部。

然而,在 Chrome 中,如果您使用导航栏中的链接,有时消失。通常,您单击的项目仍然可见,但并非总是如此。有时整个事情都会消失。移动鼠标可恢复部分元素,使用滚轮或箭头键滚动只需单击一下即可恢复元素。您可以看到它(间歇性地)发生在https://nikeplusphp.charanj.it- 您可能需要点击一些导航链接几次才能看到它发生。

我也尝试过使用 z-index 和可见性/显示类型,但没有成功。

我碰到这个问题但修复对我根本不起作用。似乎是 webkit 问题,因为 IE 和 Firefox 工作得很好。

这是一个已知问题还是有解决方案来保持固定元素可见?

Update:

仅影响具有以下特征的元素top: 0;, 我试过bottom: 0;这按预期工作。


Add -webkit-transform: translateZ(0) to the position: fixed元素。这迫使 Chrome 使用硬件加速来连续绘制固定元素并避免这种奇怪的行为。

我为此创建了一个 Chrome bughttps://bugs.chromium.org/p/chromium/issues/detail?id=288747。请为其加注星标,以便引起一些关注。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

固定元素在 Chrome 中消失 的相关文章

  • jQuery:向左滑动和向右滑动

    我见过slideUp and slideDown在 jQuery 中 左右滑动的功能 方式怎么样 您可以使用 jQuery UI 中的附加效果来做到这一点 详情请参阅此处 http docs jquery com UI Effects Sl
  • 如何计算一行中Flexbox项目的数量?

    网格是使用 CSS flexbox 实现的 Example http jsbin com jumosicasi edit html css js output 本示例中的行数为 4 因为我出于演示目的固定了容器宽度 但是 实际上 它可以根据
  • Radiobutton-带有纯 html/css 的按钮

    是否可以创建像这样的单选按钮JQuery http jqueryui com demos button radio那些 用纯html css thanks 试试这个小提琴 http jsfiddle net mcXm7 1 http jsf
  • 更改 Jumbotron 不透明度并使其全宽,而不影响字体和按钮

    想问一下如何更改 Jumbotron 不透明度并使其全宽而不影响字体和按钮的不透明度 jumbotron special text align center background attachment scroll background i
  • 使文本背景透明但不使文本本身透明

    所以我遇到了问题 我环顾四周 但没有运气 我想让我的身体背景透明 但让文本不透明 就像现在一样 我继续使两者保持相同的不透明度 这是我的代码 charset utf 8 body font 100 1 4 Verdana Arial Hel
  • 如何使一个 div 位于另外两个 div 的中间以跨越多行,就像表中的 rowspan 一样

    我已经有一段时间试图避免使用表格来布局元素了 因为我意识到它们并不是为此而设计的 并且像 div p 这样的普通容器元素以及 CSS 足以实现人们可能需要的任何布局 到目前为止 我已经取得了成功 但有一种情况我似乎无法独自克服 我基本上需要
  • 如何在加载ajax内容和javascript时加载gif图像[重复]

    这个问题在这里已经有答案了 我一直在尝试加载 gif 图像 直到 ajax 加载数据并显示它 但我对此感到安慰 我希望你能帮助我 这是我的高级搜索代码 现在我想为此添加加载 gif ajax type POST url base rul s
  • 如何使选择框水平和垂直居中

    我正在尝试将选择框水平和垂直居中 这是 jsfiddle http jsfiddle net j3r9Lp81 http jsfiddle net j3r9Lp81 CSS div currency text align center HT
  • 光标:属性值无效

    我已经找这个很久了 可悲的是 我发现的所有内容都不适合我 我的自定义光标在 Firefox 上不起作用 我有一个漂亮的 无效属性值 同样在 Firefox 开发版中我也遇到了同样的错误 但显示了光标 Chrome 没问题 显示没有任何错误
  • 如何更改点击事件上的引导插入符指向方向

    我正在使用 2 3 2 引导程序 因为当我单击菜单按钮时 我可以更改插入符号图标的位置 我需要当我单击图标插入符号向上时 当您单击另一个项目时 插入符号返回到初始状态 这怎么可能 导航代码 div div class container d
  • jQuery Masonry 和 CSS3

    如何在保持砖石布局的同时将 CSS3 过渡与当前图像结合起来 这是我的html div img class bottom src images div
  • Firefox 和 Chrome 为 offsetTop 提供了不同的值

    我试图相对于输入字段定位一个跨度元素 让我们称之为 工具提示跨度 为此 我将工具提示跨度和输入字段包装在另一个跨度元素中 我们称之为 包装器跨度 该元素具有position relative 然后我设置position absolute在工
  • 可以设置选择元素的样式,以便在下拉列表“关闭”时显示所选选项的样式吗?

    鉴于这个简单的 html
  • 没有宽度/高度的 SVG 以自然尺寸渲染

    我有这个 SVG 但没有width or height属性 我有以下 HTML div class block img src https s3 eu vAmfIxVv kiwi svg div 使用以下CSS block display
  • CSS 中的图像路径支持 CDN

    我正在尝试将我们的图像部署到 CDN 目前 CSS 具有我们网站上图像的相对路径 这些路径需要支持 CDN 图像位置 有人对我如何做到这一点有建议吗 或者是否有人有关于部署到 CDN 的好教程 这就是我最终完成此任务的方式 我用SASS h
  • 如何在严格模式下设置元素样式属性?

    Given body document getElementsByTagName body 0 iframe document createElement iframe iframe src protocol settings script
  • SVG 沿圆弧添加文本

    我正在尝试绘制 SVG 径向饼图 如下所述 色卡 https stackoverflow com a 18210763 1395178 现在我尝试将文本与圆弧一起添加到每个切片 我试图展示Text 1具有与 M 和 A 值完全相同的 x y
  • 在CSS中重置Margins/Padding时使用*是错误的吗?

    应该避免以下内容 还是应该因其简单性而受到赞扬 作为记录 我在我构建的每个站点中都使用它 但我注意到它并不存在于许多主流 CSS 重置框架中 他们是否也不使用它 margin 0 padding 0 最好不要使用它 因为它会导致表单元素出现
  • 是否可以使 Font Awesome 图标大于“fa-5x”?

    我正在使用这个 HTML 代码 div class col lg 4 div class panel div class panel heading div class row div class col xs 3 i class fa f
  • 将 SVG 元素放置在图像上

    是否可以拥有以下元素并设置它们的样式 以便 SVG 对象出现在图像上 即像图像的一部分 目前它们显示在其下方的新行中 我知道我可以将图像设置为父 div 的背景图像 但不幸的是我还需要能够在父级内旋转它 所以我认为这不是一个选项 div s

随机推荐

  • H.264 编解码器解释[关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 目前不接受答案 我正在制作一个支持视频通话的应用程序 并且正在寻找解释 h 264 编解码器结构的教程 文档 我希望能够打包流 将其包装在数据报中 在接收端发送和解
  • iPhone 模拟器/Mac OS 10.8.4 上的简单应用程序崩溃

    今天早上 将 Mac 上的 Mac OS 更新到 10 8 4 后 我在 Xcode 4 6 2 上编写了一些代码 然后按 运行 按钮进行编译 你知道 我没有停止模拟器 只需按 运行 按钮即可编译并运行 然后 应用程序崩溃了 我尝试了其他一
  • ASP.NET Core 在 Web API 中处理自定义响应/输出格式的方法

    我想创建自定义 JSON 格式 它将响应包装在数据中并返回 Content Type 例如 vnd myapi json 目前 我已经创建了一个包装类 我在控制器中返回它 但如果可以在后台处理它会更好 public class ApiRes
  • 建立一个数据库来跟踪哪些用户点击了哪些链接?

    我将尝试进一步详细说明我的问题 我最近在我的大学获得了一个入门级兼职开发人员职位 以努力提高我的开发技能 虽然我过去使用过 MySQL 但只是在一门课程中简要介绍了它 因为我主要是前端人员 HTML CSS JS 不管怎样 雇用我的部门有一
  • 如何保护我的进程不被杀死?

    我们在 Linux 之上有一个关键任务服务器程序 我们不希望其他人意外终止它 如果有人终止它或它崩溃 我们希望它重新启动 所以我们计划编写另一个程序 比如说程序B 我们希望程序B和服务器程序能够互相保护 如果我们的服务器程序退出 程序B将重
  • 在 Go 中向特定客户端发送 Websocket 消息(使用 Gorilla)

    我对 Go 很陌生 并且发现自己使用套接字作为我的第一个项目 这是一个多余的问题 但我无法理解如何 将 websocket 更新发送到 Go 中的特定客户端 使用 Gorilla 我试图解决的主要问题是 使用 websockets 和 ES
  • 停止 Jenkins 工作以防新工作开始

    是否可以指定 如果作业 A 被触发多次 则先前的作业将从队列中删除 并且只有最新的作业留在队列中或在有足够的空闲槽位时启动 提前致谢 use execute system groovy script step import hudson m
  • Python 通过写入 stdin 取消 raw_input/input?

    首先 我使用的是 python 2 7 5 和 Windows x64 我的应用程序针对的是这些参数 我需要一种方法来在一段时间过去后取消 raw input 目前 我的主线程启动两个子线程 一个是计时器 threading Timer 另
  • PyCharm 中的“未指定可执行文件”错误

    当我尝试在 PyCharm 中运行 python 脚本时 收到以下错误消息 error running myscript Executable is not specified 并且脚本不运行 如何通过 PyCharm 运行我的脚本 您需要
  • 如何将 PIL 图像对象上传到 Discord 聊天而不保存图像?

    我正在尝试将 PIL 图像对象发送到不和谐聊天 但我不想保存文件 我有一个函数可以从互联网收集图像 将它们垂直连接在一起 然后返回一个 PIL Image 对象 下面的代码从我本地计算机上的 PIL Image 对象创建一个文件图像 然后将
  • 使用 AWS API Gateway 请求验证器时启用 CORS

    我成功地使用 CORS 设置了 AWS API Gateway 当请求有效时 我有一个 200 状态代码和 CORS 标头 这很好 但是 当 AWS API Gateway 请求验证器检测到无效输入时 状态代码为 400 但未发送 CORS
  • Spring Data Rest 将自定义端点添加到特定存储库

    我想将自定义搜索端点添加到我现有的用户存储库 我的用户存储库如下所示 RepositoryRestResource collectionResourceRel users path users public interface UserRe
  • 在 Patchwork 中手动定位图例

    我想将图例 所有绘图共有 放置在拼凑布局的空白区域中 从我在网上可以找到的内容来看 我无法使用手动定位图例legend position如果我也使用guides collect 但可以使用左 右等 我尝试过使用l lt get legend
  • 如何查询内存中的一个DataTable来填充另一个数据表

    我正在尝试更新 Microsoft 报告 它的作用是写出有多少客户被排除在转换过程之外以及原因 目前 该程序将所有已删除的客户端写回到服务器 然后查询它以将结果填充到特殊表中 这是当前的查询 SELECT DeletedClients Re
  • 不同级别logback不同文件

    我的 logback xml 中有这个附加程序
  • 为什么我收到错误无法等待“void”?

    private Queue
  • 一个或多个实体的验证失败。有关更多详细信息,请参阅“EntityValidationErrors”属性[重复]

    这个问题在这里已经有答案了 我在使用代码优先方法为数据库播种时遇到此错误 一个或多个实体的验证失败 有关更多详细信息 请参阅 EntityValidationErrors 属性 说实话我不知道如何检查验证错误的内容 Visual Studi
  • 双向多对多关系中的循环引用

    我的实体中存在双向多对多关系 请参阅下面的示例 public class Collaboration JsonManagedReference COLLABORATION TAG private Set
  • Meteor 通过邮件查询其他用户

    我正在尝试使用以下命令通过电子邮件查询用户Meteor users findOne emails address email protected 它在 mongo shell 中工作 但在 Meteor 中返回未定义 有任何想法吗 UPDA
  • 固定元素在 Chrome 中消失

    当在我构建的网站上滚动时 使用 CSS 属性position fixed按预期工作 将导航栏保留在页面的最顶部 然而 在 Chrome 中 如果您使用导航栏中的链接 有时消失 通常 您单击的项目仍然可见 但并非总是如此 有时整个事情都会消失