开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么我的overlay不能在Safari上工作，而能在Chrome上工作？

overlay是一种在网页上创建浮动层的技术，它可以用于实现各种交互效果和用户界面的增强。然而，由于不同浏览器对于网页技术的支持程度不同，可能会导致在不同浏览器上的表现不一致。

在这个问题中，overlay在Chrome上工作但在Safari上不工作的原因可能是由于两个浏览器对于CSS属性或JavaScript API的支持不同所致。具体原因可能包括以下几点：

CSS属性支持差异：overlay可能使用了一些CSS属性，而这些属性在Safari中可能不被支持或支持程度较低。例如，某些浏览器可能对于z-index属性的处理方式不同，导致overlay在Safari上无法正确显示。
JavaScript API支持差异：overlay可能使用了一些JavaScript API来实现交互功能，而这些API在Safari中可能不被支持或支持程度较低。例如，某些浏览器可能对于事件处理方式的实现不同，导致overlay在Safari上无法正常响应用户操作。
浏览器版本差异：不同版本的浏览器可能对于网页技术的支持程度有所差异，因此在更新的浏览器版本中可能修复了一些兼容性问题，而旧版本的浏览器可能仍存在问题。

为了解决这个问题，可以尝试以下方法：

检查CSS属性和JavaScript API的兼容性：查阅Safari和Chrome的官方文档，了解它们对于相关技术的支持情况，特别是涉及到overlay的CSS属性和JavaScript API。可以使用Can I use等网站来查询不同浏览器的兼容性信息。
使用浏览器兼容性库：可以使用一些浏览器兼容性库，如Normalize.css或Autoprefixer，来处理不同浏览器之间的兼容性差异。这些库可以自动添加浏览器前缀或提供一些兼容性的解决方案。
适配不同浏览器：根据不同浏览器的特性和兼容性问题，针对性地编写代码，使用特定的技术或方法来适配不同浏览器。可以使用条件注释、媒体查询或JavaScript检测浏览器类型等方式来实现。
测试和调试：在不同浏览器和不同版本的浏览器上进行测试和调试，以确保overlay在各种环境下都能正常工作。可以使用浏览器的开发者工具来检查和调试代码，查看是否有报错或警告信息。

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

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs

相关搜索:Express中的CORS可以在Safari上运行，但不能在Chrome上运行 Firefox在CORS资源上失败，而Chrome和Safari工作 onBlur事件在chrome上工作，但在safari上不工作？为什么@Transactional不能在我的代码中工作？为什么ProcessPoolExecutor不能在我的代码中工作？为什么PyPlot不能在我的MAC上的Julia中工作？为什么我在Squarespace中的动画可以在Chrome上运行，而不能在Safari上运行？为什么我的Bootstrap carousel或jQuery代码不能在Safari中工作？为什么我的cron任务不能在laravel工作？为什么我的css动画不能在Safari中工作？

相关搜索:

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

有帮助

没帮助

相关·内容

Safari 版本更新？开发者的噩梦之旅！

于是乎，我直到 4 月 3 号才真正能够验证对新版本做验证，这时候距离 Safari 16.4 的全球发布已经过去了整整一周。在这段时间里，我根本不知道自己的软件能不能在 Safari 上正常运行。...== "undefined"）来做检测，却没想到 Safari 浏览器居然只定义某些上下文、却漏掉了其他上下文。难道上下文不该跟标准的元素拥有同等地位吗？为什么不这样呢？...而 Safari 呢，时至今日还是没有做到。但苹果有自己的说辞，指出只支持部分上下文完全符合规范要求，开发者应该做好相应的错误功能检测工作。...一点个人吐槽其实我不是个喜欢抱怨的人，但面对这次的大麻烦，我真心感觉应该强调一下问题的严重性。我个人最近几周过得很累、压力巨大，甚至因为焦虑而恶心反胃。对，不光是在工作中，回到家里也是一样。...我想再次强调，我说的这些绝对不是针对任何一位特定的苹果员工。这个错不是苹果中的具体哪个人导致的——事实上，我在前文中也提到，很多苹果员工都把工作做得很好。苹果也绝对不乏聪明和勤奋的头脑。

4692 0

WebAssembly 2021 年回顾与 2022 年展望

然后经过多年的发展，Safari 很不幸被甩在了后面。时间来到 2021 年，看到 Safari 不断发布对 WebAssembly 支持的更新，我感到兴奋不已。...2021 年也不例外，下面是一些运用 WebAssembly 的新领域： Disney+ 应用程序开发工具包使用 WebAssembly 网页上发布了一个简化版的 Photoshop 微软的飞行模拟器有一个基于...固定宽度 SIMD 我预测此功能将在今年的 Safari 版本中实现。...并非各厂商不想实现此功能，而是他们都为各自认为更重要的事情而忙碌。因此人们正试图提高此功能在各个厂商眼中的重要性和优先级。支持多内存此提案是使模块拥有多个内存模块。...Safari 在 2021 年是一个大惊喜，他们在追赶其他浏览器的 WebAssembly 支持上做了很多工作。

5363 0

2023 年你还在兼容旧版浏览器吗？

现在，Firefox、Chrome 和 Safari 同时引入新功能已经是很常见的事情。...比如去年，我们看到 Firefox 97、Chrome 99 和 Safari 15.4 同时推出了 CSS 级联层，大家期待已久的容器查询也在几个月后的浏览器版本中互相兼容。...Chrome 推出的新功能的文档也得到了加强，比如这是一个 Chrome 首推的 API 贡献在 MDN 上的文档，并在 developer.chrome.com 上记录功能的起源试用版。...所以，我们有必要给大家提供这样的一个基线，然后帮大家来确定哪些功能是可以安全使用的，哪些需要更多的考虑才能在所有浏览器上很好的工作。几大浏览器厂商也正在积极的界定它。...浏览器厂商希望可以做出清晰的指导，解释哪些功能可以进入基线，以及为什么可以进入基线。

4792 0

Localhost何时要用HTTPS？

✨ 这就是你需要知道的一切。如果你对更多的细节感兴趣，请继续阅读! 为什么你的开发网站应该更具有安全性为了避免遇到意想不到的问题，你希望你的本地开发网站尽可能地表现得像你的生产网站。...Securecookie只在HTTPS上设置，而不是在所有浏览器的http://localhost。...小贴士当涉及到在本地设置Securecookie时，并非所有的浏览器都以同样的方式行事。例如，Chrome和Safari不在本地主机上设置Securecookie，但Firefox会。...[终端编辑hosts文件的屏幕截图.jpeg] 终端编辑hosts文件的屏幕截图在这种情况下，Chrome、Edge、Safari和Firefox默认不认为`mysite.example...试试吧：在localhost上运行任何网站，在Chrome或Edge中访问http://.localhost:。这可能很快就能在Firefox和Safari中实现。

3.2K5 1

Safari浏览器正在杀死Web

根据 Web Platform Tests 公布的仪表板，基于 Chrome 的浏览器能够支持 94% 的测试套件、Firefox 支持 91%，而 Safari 仅支持 71%。...换句话说，无论选择 Safari 还是 Chrome，iPhone 用户们实际上使用的都是 Safari/WebKit 这对弱智组合。...就算不担心隐私，这些 API 也会减弱手机的电池续航能力。我本人并不是 iOS 用户，但苹果在隐私问题上的坚定立场确实让我相当心动。...没错，既然 Invidious（YouTube 的开源前端替代产品）都能在无需 JavaScript 的前提下加载 YouTube 内容，为什么 YouTube 自己不行？...而 Firefox 与 Safari，它们放弃了自有 API，转而接纳 Chrome 的 API。这相当于允许谷歌凭一己之力塑造 Web 扩展标准。”

1K2 0

你不应该依赖CSS 100vh，这就是原因!

顺便说一下，它在安卓手机上甚至不能按预期工作。图片 为什么100vh问题会发生在移动设备上？我对这个问题进行了一番调查，发现了其中的原因。简短的答案是，浏览器的工具栏高度没有被考虑在内。...如果你想深入了解为什么会发生这种情况，Stack Overflow的这个帖子很有帮助。如何修复移动设备上的100vh问题？第一个建议是尽量少用 vh。...DOCTYPE html> 声明，会使 fill-available 在 Chrome 浏览器上无法正常工作。...图片甚至不能在安卓浏览器上工作: 图片因此，为了解决这个问题，必须从页面中删除 doctype 声明。 2....Safari上的垂直 padding 问题在 min-height（或 height）为 fill-available的元素上添加垂直 padding （bottom 和 top），Safari浏览器上会导致问题

1.2K4 0

【SAP UI5系列】SAP UI5支持哪些浏览器

1、最新的Internet explorer 2、最新的Firefox 3、最新的Google chrome 4、最新的Safari 1、最新的Internet explorer 2、最新的Firefox...3、最新的Google chrome 4、最新的Safari 1、最新的Internet explorer 2、最新的Firefox 3、最新的Google chrome 4、最新的Safari...为什么都要最新的因为HTML5的限制如果不是用最新的，可能在显示等技术上出现问题

5780 0

你绝不能错过的效率神器 —— Alfred

书签的设置在「Preference」-> 「Feature」-> 「Web Bookmarks」中可以找到，勾选上「Safari Bookmarks」和「Google Chrome Bookmarks」...选项即可让 Alfred 读取 Safari 和 Chrome 的书签。...终身授权只能给自己使用，最多能在四台 Mac 机器上激活，并且终身免费升级（其他类型的授权升级是要钱的）。我直接上了一个Mega Supporter，花费 35 英镑（大约 310 人民币）。...我查阅了一些资料发现其实这种方式也是行得通的，但是因为官网明确指出 Family License 只能家庭使用，如果你不按照官网规定使用的话，其实你还是使用的盗版。...那如果我们再深入想一下，我们能不能在这基础上再进一步抽象，提供一个可以让用户自己定制的工具呢？如果用户发现自己工作里经常有某个重复性动作，那么用户可以自己定制这样一个流，提高其工作效率。

3.1K7 1

27年，IE时代终落幕

当时也有竞争对手，像Opera、Netscape什么的，但他们的份额和IE比起来，说是小巫见大巫，小巫都直摇头。那么为什么说IE6是式微的根源呢？...毕竟，当上无可撼动的大哥以后，还有继续精进的必要吗？反正，你们都得就着我来。缺乏竞争的氛围慢慢让IE变得慵懒、不上进，开始躺在90%的份额上睡大觉。皇冠一戴，谁也不爱。恃宠而骄，不思进取。...这个成绩足够傲人，毕竟从Netscape衰落开始，已经没有浏览器能在IE手底下占到这么大的便宜了。而真正给IE致命一击的，是苹果。其实早先，微软是和苹果的Mac有合作关系的。...这感觉，有点像当时和Win95绑定的IE，现在Chrome的背后也是一座大靠山。占尽了这些优势，加之谷歌的浏览器做的确实好，Chrome才能轻而易举的拿下IE的份额。远比火狐和Safari要轻松。...此外，即便你停在旧版Windows 10上不更新，打开IE11时也会跳转到Microsoft Edge。

4642 0

Mac下提升工作效率的方式

Mac 系统一向以提供高效的工作环境著称，iOS、Android和服务端程序员都可以轻松的在Mac上搭建舒适的开发环境。...使用快捷键的目的在于注意力集中在屏幕上，通过肌肉记忆去完成辅助的操作，而不用分神去摸鼠标，点击菜单等。...被低估的Safari 我很早之前是个重度Firefox使用者，Firefox上插件繁多，基本上能想到的功能都有对应插件来支持，缺点是插件越用越多，Firefox就越笨重，使用体验也随之降级，其实对于浏览器来说最重要的还是浏览体验...我相信经常使用Safari的朋友就不多了，其实苹果的原生应用很多都做得很好了，习惯从网上找各种应用安装完善系统功能，是从windows上带来的坏毛病。Safari的整体体验被大部分人低估了。...Safari的样式布局，文字排版，页面滑动体验，在各浏览器当中也是我个人感觉最棒的一个。 Safari上也有最常见的插件，比如Adblock，Evernote，Pocket等。

1.3K3 0

谷歌发布的首款基于HTTP2和protobuf的RPC框架：GRPC

Protobuf 本身虽然提供了RPC 的定义语法，但是一直以来，Google 只开源了Protobuf 序列化反序列化的代码，而没有开源RPC 的实现，于是存在着众多良莠不齐的第三方RPC 实现，不过我在项目中采用...WCF搭配Protobuf是一个很不错的RPC实现，Google这个框架是是基于HTTP2的，这是他有特色的地方，带来诸如双向流、流控、头部压缩、单TCP连接上的多复用请求等特性。...目前Firefox、Chrome、Safari、Opera、iOS版Safari、Android版Chrome、Windows 8上的IE 11都已经支持HTTP/2，Windows 10预览版自带的浏览器也支持它...Apache、Windows 10上的IIS和Nginx都已经实现了SPDY 3.1或4（这就是HTTP/2），剩下的工作就是网站管理员们去升级服务器软件了。...重点看了一下C# 的实现（https://github.com/grpc/grpc/tree/master/src/csharp ），目前代码只能在Mono下运行，主要是windows下的GRPC C

1.2K7 0

一个Mac系统，能让程序员编程效率提升30%

Mac 系统一向以提供高效的工作环境著称，iOS、Android和服务端程序员都可以轻松的在Mac上搭建舒适的开发环境。...使用快捷键的目的在于注意力集中在屏幕上，通过肌肉记忆去完成辅助的操作，而不用分神去摸鼠标，点击菜单等。...被低估的Safari 我很早之前是个重度Firefox使用者，Firefox上插件繁多，基本上能想到的功能都有对应插件来支持，缺点是插件越用越多，Firefox就越笨重，使用体验也随之降级，其实对于浏览器来说最重要的还是浏览体验...我相信经常使用Safari的朋友就不多了，其实苹果的原生应用很多都做得很好了，习惯从网上找各种应用安装完善系统功能，是从windows上带来的坏毛病。Safari的整体体验被大部分人低估了。...Safari的样式布局，文字排版，页面滑动体验，在各浏览器当中也是我个人感觉最棒的一个。 Safari上也有最常见的插件，比如Adblock，Evernote，Pocket等。

2.1K2 0

腾讯文档Doc Canvas渲染引擎流程改造

safari浏览器对drawImage限制，导致渲染白屏此问题主要集中在safari浏览器，正常滚动文档页面会偶现canvas drawImage不生效导致渲染白屏的问题。...由上述（1）可知，当canvas画布尺寸超过浏览器限制时，会导致canvas绘制失效，safari会在控制台弹出警告：图片chrome和safari绘制失败的canvas画布尺寸上限比较一致，但chrome...另外，渲染层仅仅使用两个canvas画布（主内容和overlay）对整个文档进行渲染展示，canvas画布尺寸和脏区大小一一对应，而canvas画布尺寸和canvas渲染耗时是正相关的：图片所以渲染脏区越大...但……为什么不直接将width和height设置为0呢？...（注：设置width和height为0进行回收的方式，在chrome可以正常回收显存；且在safari进行测试也是能正常回收，但safari devtools显示内存一直占用，此点尚且存疑）增加canvas

4.5K13 0

移动端Web开发调试之Weinre调试教程

该项目目前是 Apache Cordova 的一部分。 weinre工作原理两张图读懂Weinre的工作机制： ? ?...由于Weinre的debug客户端是基于Web Inspector开发，而Web Inspector只兼容WebKit核心的浏览器，所以只能在Chrome/Safari浏览器打开Weinre客户端进行调试...我在Chrome 38/39版本测试时打开Debug客户端出现页面白板，原因未知，了解原因的欢迎留言给我。换为Safari浏览器打开则正常。...10.6 64-bit Google Chrome 8及以上版本浏览器 Apple Safari 5及以上版本浏览器 Debug目标页面支持的平台 Android 2.2+系统浏览器 Android...2.2+ 中的phonegap iOS 4+ 的safari浏览器 BlackBerry v6.x 模拟器 webOS chrome8+ safari5+ 关于Weinre的Java版本下载地址无法访问的问题

2.1K2 0

Windows ChromeEdge同步iCloud密码

介绍众所周知，跨平台数据同步是一个非常重要的功能，尤其对于那些设备不同的工作者有着巨大的左右，比如手持iPhone/iPad，但是电脑是Windows系统的情况下，本篇教程就能给你带来一些帮助 PS...：最简单的同步方法就是iPhone/iPad和Windows电脑都用微软的Edge浏览器（Chrome因为国内网络原因无法正常使用），如果不想用Edge浏览器而是想用Safari，这个教程可能会对你有用...配置首先去微软应用商店（Microsoft Store）下载iCloud应用，然后打开登录，你能在iCloud主页看到密码同步的选项，选中它们并前往对应的浏览器中安装扩展浏览器中安装完扩展后记得重启浏览器...，并且在iCloud中选中后点击下面的apply（应用）我这里的扩展安装变成了移除，因为我安装过了，没有安装过的应该是“安装扩展”的按钮 Chrome扩展商店对应的iCloud密码插件 Edge...iCloud，实际上我已经安装过了 A：重启浏览器

2.3K2 0

浏览器测试的三大挑战及解决方案【译】

这听起来像是一个简单而直接的目标，对吧？如果企业不希望因用户体验不佳而失去客户，则必须考虑跨浏览器兼容性和跨浏览器测试。...跨浏览器测试，为什么重要简单来说，跨浏览器测试是确保 Web 应用程序的功能在不同浏览器、浏览器版本和操作系统之间保持一致的过程，从而为其用户提供轻松的用户体验。...跨浏览器测试挑战及其解决方案我们可能认为浏览器世界就是 Chrome、Internet Explorer、Firefox、Safari 或 Opera。...如果应用程序在开发时考虑了对 Chrome、Safari、Firefox、Opera 和 Internet Explorer 等五种主要浏览器的支持。它看起来非常简单和易于管理，因为它们只有五个。...Windows：Chrome、Firefox、IE macOS：Safari、Chrome、Firefox Linux：Chrome、Firefox、Opera 它看起来很容易管理，因为只有九种浏览器类型

3551 0

苹果拒绝支持PWA的行为对Web贻害无穷！

不过还有一个主要问题 —— 虽然谷歌已经接受并在 Android 版的 Chrome 浏览器添加了这一技术的支持，但是 Apple 却放弃了在 iOS 端的 Safari 浏览器中提供支持。...作者认为Google已经建立了一个PWA的基线清单，并且其中的许多功能在移动版的 Safari 上也是支持的: 站点通过HTTPS提供服务页面对平板电脑和移动设备的响应起始网址在离线时加载（实际上在...苹果的“全屏”模式充满了漏洞我尽可能地在试着在移动端 safari 中推广苹果的“类原生”体验——但它有一些严重的漏洞，而苹果公司根本不关心它们。...固定标题闪烁（我最大的心病，这就是为什么我最终在自己的产品上（ brewlog.com ）禁用它的原因）在 300ms 延迟后终于从移动版 Safari 中移除，却没有在全屏模式下移除（Apple没有回应...我也并不认为大多数的苹果公司员工都在故意忽视这一点: 可能会有一些高层或董事会成员告诉大家，不要把时间浪费在不符合应用商店盈利模式的技术上。这仅仅是资本主义特色吗？只是谋求他们自己的好处吗？不！

1.8K3 0

认识 WebAssembly

WebAssembly这个概念其实2015年就提出来了，而就在不久之前，四大浏览器厂商，Chrome, Firefox, Edge, Safari 在新版的浏览器中才全部默认支持Webassembly(...想象一下，在计算机视觉，游戏动画，视频编解码，数据加密等需要需要高计算量的领域，如果想在浏览器上实现，并跨浏览器支持，唯一能做的就是用JavaScript来运行，这是一件吃力不讨好的事情。...而WebAssembly可以将现有的用C，C++编写的库直接编译成WebAssembly运行到浏览器上, 并且可以作为库被JavaScript引用。...为什么要有WebAssembly? 如果只是想让C,C++，Java等原生语言编写的模块运行在浏览器上。我们只需要一个转换器，将源语言转换为目标语言JavaScript，而这种技术其实很早就有了。...要理解JavaScript为什么运行慢，就要理解它在引擎中的处理过程。

1.2K4 0

使用 CSS3 实现圆角效果

我爱水煮鱼博客上使用的图片比较多，虽然我采用了服务器缓存，gzip 压缩以及对 CSS 和图片文件设置了一个比较合理的过期时间，但是还是比较慢。...实现圆角效果如下： Firefox 和 Safari 使用私有属性实现圆角效果其中 -moz-border-radius 是 Firefox 实现圆角的私有属性，而 -webkit-border-radius...是 webkit 内核浏览器（如 Safari 和 Chrome）实现圆角的私有属性，如果你只要指定某一个角是圆角的话，它们都分别定义了四个属性： -moz-border-radius-topleft...webkit-border-bottom-left-radius -moz-border-radius-bottomright / -webkit-border-bottom-right-radius 当然 IE9 以下版本还是不支持，所以该效果只能在...IE9, Firefox, Safari, 以及 Chrome 中查看。

4773 0

Google IO 2023 — 前端开发者划重点

它的目的就是不希望大家以一些老旧的浏览器（例如 IE 6/7/8）作为网站的兼容性标准了，如果开发者要判定一个新的 Web 特性能不能在生产环境中使用，看看它是不是被纳入到了 Web 基线的一部分就可以了...事实上，像 Tensorflow.js 这样的 ML 库在 WebGPU 上的运行速度比常规 JavaScript 快 100 倍，而 WebGPU 的运行速度比 WebGL（Web 图形之前的黄金标准...所以，我们有必要给大家提供这样的一个基线，然后帮大家来确定哪些功能是可以安全使用的，哪些需要更多的考虑才能在所有浏览器上很好的工作。几大浏览器厂商也正在积极的界定它。...我什么时候才能在生产代码中实际使用这些功能？或者我们是不是应该长时间支持旧版浏览器？真正的答案是取决于你的用户群体、技术栈、团队结构和支持的设备。...大部分情况下，我们只想看到我们自己的代码，而不是一些隐藏在节点模型中的第三方库代码。或者大家可能正在一个大型团队工作，我们可能在每次需要调试事件处理函数的时候都要深入侵入框架代码。

4373 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭