热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

位置粘性iPhone闪烁

如何解决《位置粘性iPhone闪烁》经验,为你挑选了1个好方法。



1> Brett Parson..:

我一直都在与iOS和其他所有产品打交道。通常涉及堆栈上下文问题。在我看来,position: stickyand left: 0元素相对于iOS上的第一行而言。iOS无法像其他所有浏览器一样处理堆栈上下文。

我从来没有真正弄清楚是什么原因造成的。从技术上讲,即使您的iPhone单元在滚动时,它也仍停留在左侧,因为它是相对于没有的父单元而言的left: 0。我假设这与iOS的处理方式有关position: sticky。粘性开始相对,然后更改为固定。届时所有其他浏览器都将其固定在左侧。您在position: sticky;元素内有一个position: sticky;元素。那是一个新的堆栈上下文。我相信iOS会将它固定在其父目录上,而不是您期望的那样。由于父行没有left: 0它将与其他所有内容一起滚动。我希望这有帮助。我没有看到任何闪烁,但在iOS 13出现涉及滚动和堆叠上下文的情况后,我公司的Web框架中有一些损坏的组件。我会在多个iOS设备上进行测试。

编辑更多内容后,我相信这是一个堆栈上下文问题。我仅在iphone单元上将z-index调高到1000,并且STILL下面的行出现在它上面。

如果您不必支持Internet Explorer,则可以使用CSS网格来实现此布局。这样您就不必担心position: sticky

https://css-tricks.com/snippets/css/complete-guide-grid/

https://css-tricks.com/using-css-grid-the-right-way/

我将其用于业务应用程序中动态数据繁重的内容,因此,如果利用得当,它可以具有难以置信的灵活性。

再次更新 -如果您根本无法更改DOM,那么您将不得不处理闪烁,因为即使网格解决方案也需要围绕某些元素进行包装。只是为了澄清 ....使用网格解决方案,您无需知道您将拥有多少列或行。您似乎在这方面挂了电话。网格区域还创建了一个新的堆栈上下文,并使所有内容都与它所在的网格区域相关,同时允许使用灵活的单元。在您演示动态数据的输入方式之前,我无法给您一个答案。我们需要更多的上下文来为您提供代码解决方案。

再次发生闪烁是因为您在另一个粘性元素中有一个粘性定位的元素。那只是iOS,如果您想像这样使用它,就必须处理它。

这是有关堆栈上下文及其工作方式的文档。正如我在评论中指出的那样,您将不得不采用其他方法或只是处理它。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

还有-

隐藏HTML和主体上的溢出。在桌子上放一个包装纸。放在-webkit-overflow-scrolling: auto包装纸上。在iOS 12上运行它,您不会看到它闪烁。您不会有动量滚动。iOS13消除了对的需要,-webkit-overflow-scrolling因此您甚至无法覆盖它。如果您将touchon 的值设置为on -webkit-overflow-scrolling,则现在会闪烁。在下面运行此代码,您不会看到它闪烁。长话短说,正如我多次说过的那样,您将不得不寻找一种不同的方法。现在iOS13已经发布,您无法解决此问题,您也确实不想禁用动量滚动。

html {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

body {
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.wrapper {
  overflow: auto;
  -webkit-overflow-scrolling: auto;
  width: 100%;
  height: 100%;
}
.table {
  width: 2000px;
  position: relative;
}

.tr {
  overflow: visible;
  display: block;
  white-space: nowrap;
  font-size: 0;
}

.tc {
  border: 1px solid #DDD;
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  font-size: 12px;
}

.trh {
  background: #000;
  color: #FFF;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

.tc.first {
  background: #000;
  color: #FFF;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
}

  
    
    
  
  
    
Iphone
value
value
value
value
value
value
value
value
a set
0
0
0
0
0
0
0
2
a set
0
0
0
0
0
0
0
0
a set
0
0
0
0
0
0
0
0
a set
0
0
0
0
0
0
0
0
a set
0
0
0
0
0
0
0
0
a set
0
0
0
0
0
0
0
0
a set
0
0
0
0
0
0
0
0
a set
0
0
0
0
0
0
0
0

推荐阅读
  • 如何高效创建和使用字体图标
    在Web和移动开发中,为什么选择字体图标?主要原因是其卓越的性能,可以显著减少HTTP请求并优化页面加载速度。本文详细介绍了从设计到应用的字体图标制作流程,并提供了专业建议。 ... [详细]
  • 在Linux系统中配置并启动ActiveMQ
    本文详细介绍了如何在Linux环境中安装和配置ActiveMQ,包括端口开放及防火墙设置。通过本文,您可以掌握完整的ActiveMQ部署流程,确保其在网络环境中正常运行。 ... [详细]
  • QUIC协议:快速UDP互联网连接
    QUIC(Quick UDP Internet Connections)是谷歌开发的一种旨在提高网络性能和安全性的传输层协议。它基于UDP,并结合了TLS级别的安全性,提供了更高效、更可靠的互联网通信方式。 ... [详细]
  • 深入理解 Oracle 存储函数:计算员工年收入
    本文介绍如何使用 Oracle 存储函数查询特定员工的年收入。我们将详细解释存储函数的创建过程,并提供完整的代码示例。 ... [详细]
  • 本文总结了2018年的关键成就,包括职业变动、购车、考取驾照等重要事件,并分享了读书、工作、家庭和朋友方面的感悟。同时,展望2019年,制定了健康、软实力提升和技术学习的具体目标。 ... [详细]
  • 在计算机技术的学习道路上,51CTO学院以其专业性和专注度给我留下了深刻印象。从2012年接触计算机到2014年开始系统学习网络技术和安全领域,51CTO学院始终是我信赖的学习平台。 ... [详细]
  • 本文介绍了如何使用jQuery根据元素的类型(如复选框)和标签名(如段落)来获取DOM对象。这有助于更高效地操作网页中的特定元素。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 本文介绍如何在 Xcode 中使用快捷键和菜单命令对多行代码进行缩进,包括右缩进和左缩进的具体操作方法。 ... [详细]
  • 本文详细介绍了如何使用Python编写爬虫程序,从豆瓣电影Top250页面抓取电影信息。文章涵盖了从基础的网页请求到处理反爬虫机制,再到多页数据抓取的全过程,并提供了完整的代码示例。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 本文详细介绍了W3C标准盒模型和IE传统盒模型的区别,探讨了CSS3中box-sizing属性的使用方法及其在布局中的重要性。通过实例分析,帮助读者更好地理解和应用这一关键概念。 ... [详细]
  • 如何在WPS Office for Mac中调整Word文档的文字排列方向
    本文将详细介绍如何使用最新版WPS Office for Mac调整Word文档中的文字排列方向。通过这些步骤,用户可以轻松更改文本的水平或垂直排列方式,以满足不同的排版需求。 ... [详细]
  • 本文介绍如何通过Windows批处理脚本定期检查并重启Java应用程序,确保其持续稳定运行。脚本每30分钟检查一次,并在需要时重启Java程序。同时,它会将任务结果发送到Redis。 ... [详细]
  • 本文介绍如何通过SQL查询从JDE(JD Edwards)系统中提取所有字典数据,涵盖关键表的关联和字段选择。具体包括F0004和F0005系列表的数据提取方法。 ... [详细]
author-avatar
wy
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有