首页
学习
活动
专区
圈层
工具
发布

解决iOS 版Safari 中浮动(float)导致页面右侧偏移的bug

昨天在用ipad 调试最新的主题的时候遇到了一个坑,现在写在这里记录下——iOS 版Safari 中浮动(float)导致页面右侧偏移的bug。...重现 看标题看客可能会不知所云,且直接上图,这个bug导致的结果是这样的: ? ?...当初发现这个问题时候不能一下定位在某个 div 上,只能一个个排查;幸好这个问题只在文章页发现,然后就在文章页排查一个个组件,因为有经验将代码分模块写,最后很容易就锁定到了出问题的模块——“上一篇、下一篇...这个WordPress 主题中“上一篇、下一篇”的模块的HTML代码大概是这样的: <a class="prev...解决 问题发现源头,就得解决,首先先试着采用position的定位方式,未果(当然,“果”不了可能因为前端渣);然后就偷懒借助万能的google,在stackoverflow 上找到了解决方案;加个 overflow

2.8K60

iPhone页面的常用调试方法

在iPhone中调试,大体上与上文 安卓中的移动页面调试 类似,区别主要是iOS系统中的一些限制,导致某些工具无法使用。 本文基于此,简要介绍在iPhone中如何调试页面。...最终可以实现在Mac平台使用Safari(或结合ios_webkit_dubug_proxy使用Chrome)调试手机中Safari的页面,结合Charles进行抓包请求断点,再通过微信ipa包重签名来调试微信的...,在iPhone上不好设置HOST,所以需要一些代理工具帮助我们 除了Windows平台中常用的代理调试工具Fiddler之外,还可以使用Mac中的常用代理工具 Charles Fiddler 与上文类似...不过对于iPhone的调试,还需要进行真机的页面查看 一般来说,iPhone中的页面是在Safari浏览器中查看的 微信中的内置浏览器是WKWebView内核或 UIWebView ,WKWebView...基于 ios-webkit-debug-proxy 的调试 Mac上的safari调试功能不够好,而且不能调试微信中的页面,使用weinre只能简单地调试微信页面,无法进行脚本断点等高级功能 最好的办法莫过于让

3.9K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    通过 Mac 远程调试 iPhoneiPad 上的网页

    下面我讲讲详细的调试过程: 1. 要进行远程调试,首先要打开开启 iPhone/iPad 上的 Safari 的远程调试功能,“通过 设置 > Safari > 高级”开启: 2....然后打开 Safari,开启你要调试的网页,当然原生应用中通过 WebView 开启的网页也是可以调试的。 3....最后把 iPhone 或者 iPad 通过数据线连上 Mac 电脑,打开桌面版的 Safari(目前 iOS 6 的 Safari 远程调试只支持通过 Mac 上的桌面版的 Safari 进行,Safari...最后就是调用桌面版的 Safari 的 Web 检查器对 iPhone/iPad 上的 Safari 应用进行调试: 这个调试过程和我们平常在 Mac/PC 上调试基本一样,比如可以对 HTML 和...另外它还支持触摸检查(Touch to inspect):激活检查器上的手型图标,就可以通过在 iPhone/iPad 上触摸,就能立即找到检查器对应的 DOM 元素。 ----

    2.4K20

    你的Safari浏览器被“锁”了吗?千万别付赎金,升级iOS 10.3即可

    前两天苹果发布了最新的iOS 10.3更新,这次更新修复了不少安全问题,其中包括对移动端Safari对JavaScript弹出窗口的处理方式的改变。...由于iOS 10.3浏览器采用每个标签独立运行的方式,因此在iOS 10.3中单个标签弹窗不会锁住整个浏览器,用户可关闭该标签或移动到另一标签解决被无限弹窗的问题。...调查勒索行为 从下面这条指令可以看出,此次攻击利用JavaScript代码是对早期攻击的再利用。...后续版本的iOS系统中,弹出错误窗口对话框实际上是因为移动版Safari无法找到本次URL查询,不过由于无限循环代码,攻击代码还是会持续弹出错误日志信息。...这种攻击在新版本的iOS中可能会导致浏览器DOS(拒绝服务)。 ? 在执行混淆代码之前该网页代码还会运行下面这个脚本 navigator.

    1.8K50

    在Windows上调试iPhoneiPad的safari浏览器

    Inspect来调试safari浏览器(因为iPhone上面的QQ/微信没有x5内核,所以只能调试safari了) 准备工作 Windows 10/11 - 当然win也可以,前提是PowerShell...版本大于3 Scoop - Windows上面最好用包管理器 iPhone - 建议iPhone 14 Pro Max 1TB,如果没有的话,有Safari也行 数据线 - 这个不用我多说了吧,得有线连接...远程调试 打开你的iPhone设置,找到Safari浏览器,然后划到最下面高级,之后开启网页检查器,然后使用数据线将iPhone连接到电脑,在手机的弹窗中选择信任该电脑即可,如果没有提示可能是你没安装iTunes...接着在你的PowerShell里面启动remotedebug_ios_webkit_adapter remotedebug_ios_webkit_adapter --port=9000 之后打开你的Chrome...如无特殊说明《在Windows上调试iPhone/iPad的safari浏览器》为博主MoLeft原创,转载请注明原文链接为:https://moleft.cn/post-291.html

    5.3K20

    伯克利研究生是如何发现苹果设备超级间谍软件Pegasus的

    当Marczak点击了钓鱼邮件链接之后,他的Safari浏览器出现了闪退现象,在此监测过程中,他发现了间谍软件成功利用Safari浏览器实施了第一阶段感染行为。...由于Marczak 使用Ios 9.3.3进行模拟测试,而在Ios 9.3.4中,Safari没有任何更新,Marczak敏锐地意识到这是一个0-day漏洞。...意外转机 意外的是,没过几天,Marczak就又从Mansoor那里收到了另外一封类似的转发邮件,令人难以置信的是,其中又包含了一个sms.webadv.co的网页链接。...他意识到Mansour使用的是运行iOS 9.3.3的iPhone 5,如果使用其它版本的系统来监测间谍程序,可能会出现异常,之后,Marczak便开始在伯克利实验室寻找iOS9.3.3的iPhone手机...Marczak屏住呼吸把钓鱼邮件链接粘贴到了手机的Safari浏览器中,点击运行,短暂的10秒之后,Safari出现了闪退,Marczak高兴地大叫起来。

    1.3K51

    📚一站式解决:H5开发全攻略,看这篇让你省时又省力

    这样设置后,设计稿上的 1px 就对应于 1/100rem,方便转换。...calc(100vw - 100%); } ⭐️⭐️禁止长按操作 使用user-select: none和-webkit-touch-callout: none属性可以禁止用户对元素进行长按操作,防止出现意外的行为...⭐️⭐️⭐️⭐️⭐️click 点击延迟与穿透问题 现象 在 iOS 设备上,单击事件可能会有 300ms 的延迟,因为 Safari 浏览器需要在单击 300ms 后判断用户是否进行了第二次点击以实现双击缩放操作...原因 键盘不能回落问题出现在 iOS 12+ 和 wechat 6.7.4+ 中,而在微信 H5 开发中是比较常见的 Bug。 ...是#/home,导致初始化微信 SDK 时传入的分享 url 和用户实际触发分享操作时页面的 url 不一致,致使在 iOS 上分享失败。

    2.4K21

    微信小程序布局单位的使用

    rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。官方推荐微信小程序可以用iPhone6 作为视觉稿的标准。规定屏幕宽为750rpx。...如在 iPhone6 上,屏幕宽度为750 px,则共有个750 物理像素,则750 rpx = 375px = 750 物理像素 例如 : 1rpx = 0.5px = 1物理像素 但是不同iOS设备上...,px和rpx换算有些区别: iphone5 上: 1rpx = 0.42px 1px = 2.34rpx iphone6 上: 1rpx = 0.5px 1px = 2rpx iphone6S...上: 1rpx = 0.552px 1px = 1.81rpx 在不同设备上rpx与px的转换是不相同的,但是宽度的rpx却是固定的,所以可以使用rpx作为单位,来设置布局的宽高,不是所有的单位都适合...vw, vh, vmin, vmax:IE9+局部支持,chrome/firefox/safari/opera支持,ios safari 8+支持,android browser4.4+支持,chrome

    3.6K61

    多端开发实践 | 不同手机系统兼容性挑战与实战解决方案

    引言多端开发的实际业务场景中,前端开发经常会遇到跨系统、跨机型的兼容性问题。...时间控件与键盘的冲突:iOS专属现象描述:iOS中呼出系统键盘而非时间选择器。...); // Safari中 → Invalid Date解决方案:日期安全解析库/** * 日期安全解析库 * 解析日期字符串并返回Date对象,处理不同平台的兼容性问题 * * 该函数主要解决以下平台特定的日期格式问题...value={toLocalDate(value)} onChange={handleChange} />;};三、滑动穿透的挑战3.1 弹窗背景滑动穿透:iOS物理滚动惯性现象:弹窗出现时,滑动弹窗会导致背景页面滚动解决方案...返回 14),非 iOS 返回 null结语本文详细汇总了 iOS、Android、鸿蒙等不同系统型号手机在多端开发中常见的兼容问题,阅读本文的核心收获为:兼容性问题本质是设备特性与预期行为的错配防御式编程比事后修复成本低深对不同操作系统特性的理解多端业务场景下的兼容性问题多种多样

    78131

    iOS 9人机界面指南(二):设计策略 - 腾讯ISUX

    尽可能早的创建应用的定义可以帮助你将一个想法和功能清单转换为用户想要的条理清晰的产品。在开发过程中,可以使用定义来决定某些功能和行为是否合理。使用以下几个步骤来创建一个可靠的应用定义。...2.3.3 iOS系统内的网页内容(Web Content in iOS) iOS版的Safari应用在iOS设备上提供了出众的移动网页浏览体验。...网站也可以通过其他的方法适配桌面网页到iOS端的Safari浏览器中: 使键盘适应iOS端的Safari....当键盘和格式辅助信息出现时,iPhone上的Safari应用会将你的网页显示在URL地址下方和键盘与格式辅助信息上方。...在iOS版的Safari应用中,弹出式菜单由原生的元素所呈现,这样能提供更好的用户体验。例如,在iPhone上,弹出式菜单会出现在选择器(picker)当中,选择器里会一个用户可选择的选项列表。

    1.7K21

    Google安全团队该不该披露疑似美国政府的黑客行动?

    的Safari浏览器也被波及。...近期,这两个团队意外地发现了一条大鱼:一个专家级黑客组织利用11个强大的漏洞来攻击运行iOS、Android和Windows的设备。 ?...《麻省理工科技评论》(MIT Technology Review)表示,这些受质疑的黑客实际上是西方政府特工,正在开展反恐行动。...受到攻击的软件包括iPhone的Safari浏览器,还有许多谷歌产品,例如Android手机和Windows电脑上的Chrome浏览器。 ?...美国官员称,卡巴斯基和谷歌一样,没有明确地将威胁归因,但将攻击行为公开,导致攻击行动难以为继,特工无法接触到有价值的监控项目,甚至让士兵的生命处于危险之中。

    58710

    将你的网站打造成一个iOS Web App

    2014.2.22更新:建议看完本文后再看《iOS / Android 移动设备中的 Touch Icons》一文。...前言 iOS上的一个Web App(下图中的「念」)和Native App(原生应用)在外观上看起来基本上一样,但是其使用的技术是HTML,CSS,Javascript,而不是原生应用所使用的Objective-C...本文简单介绍一下如何把一个Web站点改造成iOS上的Web App,这里假设你的网站是响应式设计(responsive design)或者已经做过移动端的适配。...如果有多个符合条件的icon,那么iOS会选择有precomposed关键词的那个。 如果在HTML中没有指定icon,那么iOS会到WEB根目录下寻找对应的icon。...链接问题 在Safari中,如果点击一个链接,那么Safari将会打开一个新的tab,显然做为一个应用这体验简直太差了,需要在HTML中加入以下JavaScript来阻止此行为: <script charset

    2.4K60

    使用IdentityServer出现过SameSite Cookie这个问题吗?

    不幸的是,Safari 有一个“错误”[7]。此错误导致 Safari 无法将新引入的值 None 识别为 SameSite 设置的有效值。...此错误已在 iOS 13 和 macOS 10.15 Catalina 上的 Safari 13 中修复,但不会向后移植到 macOS 10.14 Mojave 和 iOS 12,它们仍然拥有非常大的用户群...幸运的是,是的。如果您已经设置 SameSite=None,您可能已经注意到您的应用程序或网站在 iOS 12 和 macOS 10.4 上的 Safari 中无法正常工作。...on iOS 12 for iPhone, iPod Touch, iPad // - Chrome on iOS 12 for iPhone, iPod Touch, iPad...除了彻底的测试,特别是在 Chrome 79 中激活了“默认 cookie 的 SameSite”标志以及 macOS 和 iOS 上受影响的 Safari 版本,是的,你现在应该没事了。

    2.3K30

    Zoom支持自动生成字幕;SharePlay上线;Safari 更新导致大量bug |WebRTC风向

    内容简介: 自动生成字幕难度不低,但国民级应用Zoom把这一功能拿来了;在iOS 15.0 Safari的更新中,增加了很多WebRTC相关的特性,你想了解吗?相关信息,尽在文中。...本次更新修复了iOS 15.0 中无法通过Apple Watch解锁iPhone的 bug,同时还正式上线了 FaceTime 同播共享(SharePlay),并为 iPhone 13 Pro 系列机型带来了...相关链接1: https://36kr.com/p/1452080810256521 相关链接2: https://36kr.com/p/1457374160955264 Safari 更新导致大量bug...在iOS 15.0 Safari的更新中,增加了很多WebRTC相关的特性,比如Insertable stream的支持,可以用来端到端加密,屏幕共享、HTTP3.0的支持,甚至支持在浏览器中跟facetime...但同时也出现了很多bug,对WebRTC影响比较大的是,iOS15.1系统在使用WebRTC推流的时候会导致crash, iOS 15.0的safari中websocket如果在服务端开启了压缩,会导致连不上

    1.6K10

    iMessage是怎么成为“黑灰产的乐园”

    很多用户表示,在iPhone手机上短信过滤功能就是一个摆设,对于垃圾短信没有任何的屏蔽作用,于是iPhone上的iMessage功能,逐渐沦为了“黑灰产的乐园”。...PQ3协议将在iOS 17.4、iPadOS 17.4、macOS 14.4和watchOS 10.4中提供。...攻击者为了支持新旧 iPhone,所以还做了一个包含指针身份验证代码的绕过功能,可以用在最新款 iPhone 上; 7....利用所有漏洞后,JavaScript 漏洞可以针对设备执行任何操作,包括运行间谍软件,但攻击者选择: 启动 IMAgent 进程并注入有效负载以清除设备中的漏洞利用痕迹; 以不可见模式运行 Safari...据卡巴斯基介绍,在2019年就有黑灰产尝试利用该漏洞发起攻击,到了iOS 16版本,该漏洞甚至演变成黑灰产滥用的局面。

    47510

    iOS 12 安全更新 | 一个月内安装率超 50%,越狱和漏洞一个也没少

    此前,Facebook 以外页面上的 Facebook 分享按钮可以识别用户身份,就算用户没有共享任何内容,也可以将页面链接到 Facebook 帐户;而在 iOS 12 中,当 Safari 检测到这种跟踪时...此外,iOS 12 中还设置了 Safari 中“指纹识别”屏蔽,阻止广告跟踪器发现并识别设备; 更强的密码保护:当用户在 Safari 中保存的两个或多个登录地址使用相同的密码时,会出现提醒;同时,依旧可以通过...iOS 12 越狱 9 月 27 日,沉寂多日的盘古团队在 iPhone XS 开卖不到一周的时间内宣布在 A12 处理器上找到安全漏洞并成功越狱。...Jose Rodriguez 自称是一名苹果爱好者,曾经发现过 iPhone 中的许多问题和缺陷,并在其 YouTube 频道“Videosdebarraquito”上发布分享视频。 ?...在视频中,Rodriguez 演示的绕过步骤高达 37 步。到目前为止,他已经发布了两个用西班牙语录制的视频,以展示在运行 iOS 12 的解锁 iPhone 上绕过密码的过程。

    1.4K50

    厉害了,15 行代码让 iPhone 崩溃。。

    一个名叫Sabri Haddouche的网络安全研究人员发推特说发现了苹果系统一个新的漏洞,可以使iPhone或Mac崩溃并重启。...他们公布了一个只有15行代码的网页,访问这个页面就会让iPhone或iPad崩溃。 ? 有人在开原网站github上发布了相关信息,包括bug的源代码,代码只有几行CSS和HTML代码。...“任何在iOS上呈现HTML的页面都会受到影响。”——这意味着如果有人通过社交媒体或电子邮件向你发送这个链接,或者你访问了包含代码的网页,你的设备就有可能崩溃。...根据外媒9to5Mac的说法,“大量计算导致WebKit渲染器过载,系统只能重启内核,也就出现了‘白苹果’,然后导致重启。” 而WebKit正是Safari浏览器使用的HTML渲染引擎。...但好在这只是软件问题,不会导致硬件损坏,所以除了重启一下,倒没有其他大问题。 ? 此前,iOS设备也遇到过类似问题,若干代码或几个特殊字符可能导致设备崩溃,但通常苹果会在下一个系统更新中修复。

    1.5K30

    移动Web 开发中的一些前端知识收集汇总

    设备中的safari私有meta标签,它表示:允许全屏模式浏览,在ios上,用户将网页添加到主屏后,再从主屏幕打开这个网页,可以隐藏浏览器的地址栏和下面的toolbar; 第二个meta标签表示:强制让文档的宽度与设备的宽度保持...1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览; 第三个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式,其值有三个:default、black...添加初始化图片 用户点击你桌面上的webapp的图标后,打开会加载浏览器(实际上是webkit webview模块),然后下载、解析、渲染,在这个过程中,ios允许我们使用一个初始化图片来替代白色的浏览器屏幕...iOS Web App》、《iOS / Android 移动设备中的 Touch Icons》这两篇文章了解更多。..., 可用在图片上加这个属性禁止下载图片*/ -webkit-overflow-scrolling: touch;/*快速滚动和回弹,模拟原生app效果*/ click 事件 ios的safari的click

    4.6K50

    iOS Toolkit for Mac(iOS数据恢复工具)v9.0.76中文激活版

    AnyMP4 iOS Toolkit Mac版可以从iTunes备份中恢复丢失/删除的文件、可以从iCloud Backup恢复丢失的iOS数据,恢复前预览iPhone数据、将丢失/现有的iOS数据备份到计算机...图片iOS Toolkit for Mac(iOS数据恢复工具)iOS Toolkit mac版功能介绍从Mac上的iPhone / iPad / iPod恢复数据借助这款功能强大的iPhone数据恢复技术...对于iPhone 4 / 3GS,iPad 1和iPod touch 4,此Mac iPhone数据恢复可以恢复19种类型的数据,包括通讯录,短信/彩信,通话记录,日历,便笺,提醒,Safari书签,Safari...从iTunes / iCloud备份中恢复iOS数据每次将iOS设备与iTunes同步时,iPhone / iPad / iPod上的数据都将备份到iTunes备份文件中。...但是,无法直接查看或取出备份的iOS数据。您必须使用iPhone Data Recovery for Mac软件管理iTunes备份文件中的数据,然后将丢失/删除的重要文件检索到您的设备。

    2.2K20
    领券