开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

css转换-延迟在safari桌面、safari和chrome mobile中不起作用

CSS转换是一种用于改变元素外观和布局的技术。它可以通过应用不同的转换函数来实现旋转、缩放、倾斜和平移等效果。然而，在某些情况下，CSS转换可能在特定浏览器中不起作用，比如在Safari桌面、Safari和Chrome移动端中存在延迟的问题。

延迟在Safari桌面、Safari和Chrome移动端中不起作用的问题可能是由于以下原因导致的：

浏览器兼容性问题：不同浏览器对CSS转换的支持程度可能不同，导致在某些浏览器中延迟不起作用。这可能是由于浏览器的实现方式、版本差异或厂商特定的问题。
浏览器性能问题：某些浏览器可能在处理复杂的CSS转换时存在性能问题，导致延迟不起作用。这可能是由于浏览器的渲染引擎或硬件性能限制所致。

针对这个问题，可以尝试以下解决方案：

检查CSS代码：确保CSS转换的代码正确无误，没有语法错误或其他问题。可以使用在线CSS验证工具或浏览器开发者工具进行检查。
使用CSS前缀：在CSS转换属性中添加浏览器前缀，以确保在不同浏览器中都能正确地应用转换效果。例如，使用-webkit-前缀来适配Safari和Chrome移动端。
降低转换复杂度：如果CSS转换的代码非常复杂或包含大量元素，可以尝试简化代码或减少转换的元素数量，以提高性能和避免延迟问题。
使用JavaScript替代：如果CSS转换在特定浏览器中无法正常工作，可以考虑使用JavaScript库或框架来实现相同的效果。例如，使用jQuery或GreenSock等库来处理元素的动画和转换效果。

需要注意的是，以上解决方案仅供参考，具体的解决方法可能因实际情况而异。如果问题仍然存在，建议查阅相关浏览器的官方文档或社区论坛，寻求更详细的帮助和支持。

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

腾讯云官网：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
人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
移动开发平台（MTP）：https://cloud.tencent.com/product/mtp
区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe

相关搜索:css在chrome和safari中悬停问题 Uploadify在Google Chrome和Safari中不起作用使用webkit转换应用css类在Safari或Chrome中不起作用 JQuery CSS高度设置在Chrome/Safari上不起作用 CSS在桌面和安卓上的chrome上运行良好，但在safari上不起作用转换: translateY()在Safari中不起作用 Css媒体查询在chrome和safari中不能正常工作 CSS动画在chrome中有效，但在firefox和Safari中不起作用 CSS背景颜色在Safari中不起作用 CSS后台位置无法在Mobile Safari(iPhone/iPad)中运行在Safari和Chrome中截断SVG背景文本 CSS背景-滤镜: Safari中的模糊和Chrome渲染问题转换: translateY(-50%)在Safari中不起作用在chrome和safari中查询keyup触发器不起作用 CSS关键帧在IOS设备上不起作用(Chrome、Safari)css3转换在safari和chrome上的显示方式不同 Flexbox在Safari中不起作用，但在Chrome和Firefox中起作用 JavaScript在Safari中不起作用，但在火狐和Chrome中起作用 CSS -背景色在safari中不起作用 <a>标签背景-颜色CSS在safari中不起作用

相关搜索:

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

有帮助

没帮助

相关·内容

CSS3文本与字体

兼容性：IE5.5+、FireFox15+、Chrome4+、Safari3.1+、Opera15+

03

移动端页面开发遇到的一些问题

5、当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对 ios 的 safari

02

scrapy之user-agent池

常见的反爬策略有很多，今天我们一起跟随小省开始，ua的反爬之旅，咳咳咳，敲黑板喽！

01

fastclick

桌面浏览器; 如果视口元标签中设置了width=device-width，Android上的Chrome 32+会禁用300ms延时;

01

解决ios不支持按钮:active伪类的方法

mozilla开发社区上有 :active 不起作用的答案： [1] By default, Safari Mobile does not use the :active state unless there is a touchstart event handler on the relevant element or on the <body>. 在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。 document.body.ad

07

js获取元素样式之getComputedStyle方法

习惯了jquery的同学应该都知道获取元素样式的方式可以直接写成(obj).css(style);更方便的获取高度宽度等一些样式可以直接使用(obj).height()和

03

【WebApp开发必知】移动游览器私有Meta属性

Meta属性在移动端可以说是不得不知道的使用得非常频繁的技术。下面就给大家整理一下在移动端的各大浏览器一些私有的Meta属性。

02

@font-face css3自定义个性化字体

使用第三方平台转换字体文件为font-face所支持的格式。 TureTpe(.ttf)格式　　支持浏览器：IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+ OpenType(.otf) 格式　　支持浏览器：Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+ Web Open Font Format(.woff) 格式　　支持浏览器：IE9

07

兼容性测试工具分享

有多少朋友做过浏览器兼容性测试？怎么做的，效率怎么样，是在不同的机器上下载不同的浏览器进行效果确认？有多少人对浏览器的兼容性测试犯过愁？　　本人曾经也对浏览器的兼容性感到头痛，后来到网上找了些资料和工具，虽然未能彻底解决所遇到的问题，不过多少有些帮助，特此分享给大伙，若大伙有什么更好的工具或是经验方法还希望能拿出来晒一晒。　　鄙人主要尝试过这几个工具:IETester, SuperPreview,Browsershots，Browser Sandbox。下面分别说一下。 IETester 估计工作

08

移动开发实用

meta基础知识 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection" content="telephone=no" /> 忽略Android平台中对邮箱地址的识

03

由浅入深学习JavaScript Debug技巧

我常常看到不少开发者不懂如何Debug JavaScript代码，因此决定写一篇博客为初学者介绍如何Debug。我希望这篇文章可以提供一些有用的信息。我尝试在本文讲述很多内容，所以有些部分并没有讲得很细。在开始之前，做一些基本的准备：这是针对浏览器运行的JavaScript，而不是Node.js；你需要有一定的编写JavaScript的基础；你需要在概念上知道Debug是什么；你最好动起手来，边看边操作。注意：1. 你最好打开两个窗口，一边看一边操作来学习；2. 本文的主要目的是教会你debug

09

网页中内嵌字体

Background 今天在浏览一个网站的时候，发现了一款非常好看的字体，审查元素发现，这个字体叫Open Sans，非常惊艳。和我以前发现的一款字体Segoe UI非常像。对比了一下，其实都很不错，而且很相像。于是Google了下，竟然发现其实这两款字体出自同一人Steve Matteson之手！真是大神级的人物。看来的我的欣赏水平还没有跑偏。不同的是，Segoe UI属于微软的东西，付费，而Open Sans是免费的。刚好自己最近在做网站开发，于是就想把这款字体嵌入到自己正在做的网页里。今天就写一下

07

iOS APP添加桌面快捷方式

2）客户端通过OpenUrl调起Safari，再二次跳转到data url 技术实现方案是首先通过调起Safari，然后跳到一个Data URI Scheme形式下的HTML页面，而添加到主屏幕的也是这个Data URI Scheme形式下的HTML页面。 OpenUrl调起Safari的实现为： [[UIApplicationsharedApplication] openURL:[NSURL URLWithString:@"http:www.xxx.com"]]; 通过该方法即可调起Safari，让Safari访问附带的URL链接，在该功能实现中，URL链接指向一个Data URI Scheme形式下的HTML页面。如下图所示：

05

给用户一个否减弱动画效果的选择[每日前端夜话0x8B]

你有没有看到过这样一种简洁的技术【http://bradfrost.com/blog/post/reducing-motion-with-the-picture-element/】，它基于 prefers-reduced-motion 媒体查询，将 <source media=""> 用于 <picture> 元素来提供动图（或不提供动图）？

05

Normalize.css ——CSS Reset的友好替代品

最近才第一次接触这个Normalize.css，之前Jeff 都是采用CSS Reset的，但如今发现现在流行这个Normalize.css 了。自己也查阅了不少资料去了解，现在权当是笔记放在这里吧。 Normalize.css 简介官方网站：http://necolas.github.io/normalize.css/ 浏览器支持情况：Chrome, Firefox, Opera, Safari 6+, IE 8+ Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的

09

【CSS】636- 你必须记住的30个css选择器

星状选择符会在页面上的每一个元素上起作用。web设计者经常用它将页面中所有元素的margin和padding设置为0。*选择符也可以在子选择器中使用。

03

css笔记 - transition学习笔记(二)

transition过渡：用于当元素从一种样式变换为另一种样式时为元素添加效果。

03

从零开始学 Web 之 CSS3（六）动画animation，Web字体

好的前端工程师，会更注重用户的体验和交互。那么动画就是将我们的静态页面，变成具有灵动性，为我们的界面添加个性的一种方式。

01

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

在开发DeveMobile 与EaseMobile 主题的时候积累了一些移动Web 开发的前端知识，本着记录总结的目的，特写这篇文章备忘一下。要说移动Web 开发与传统的PC 端开发，感觉也没什么不同，但得益于苹果对于智能机的推动，CSS3+HTML5几乎可以毫无顾忌的使用，然后浏览器端考虑webkit内核的就差不多了。 webkit内核中一些私有的meta标签 <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="vi

05

css笔记 - transform学习笔记(二)

属于2D/3D上的转换、变形效果。他不是一个动画，他就是变形。比如正方形变平行四边形，再变圆形。都是形状变成另一个形状。

01

CSS3魔法堂：认识@font-face和Font Icon

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　过去我们总通过图片来美化站点的LOGO、标题、图标等，而现在我们可以通过@font-face获取另一种更灵活的美化方式。二、看看例子　　　　　　　　　　　　　　　　　　　　　　　　　　　 /* 定义 */ @font-face { font-family: 'MicrosoftYaHei'; src: url('MicrosoftYaHei.eot'); /* IE9 Compat Modes */ src:

08

Nginx配置缺失导致CSS不起作用

启动nginx，打开网页，发现样式并没有如期加载，看chrome的console，显示如下：

01

常见的几种 CSS 水平垂直居中解决办法

用CSS实现元素的水平居中，比较简单，可以设置text-align center，或者设置 margin-left:auto; margin-right:auto 之类的即可。

01

用css3制作旋转加载动画的几种方法

以WebKit为核心的浏览器，例如Safari和Chrome，对html5有着很好的支持，在移动平台中这两个浏览器对应的就是IOS和Android。最近在开发一个移动平台的web app，那么就有机会利用css3去实现一些很酷的效果，这些效果原来更多的是利用图片来实现。最近的一个改进就是利用css3制作旋转加载动画。以下将分别介绍几种实现的方案。方案1，图片辅助传统做法是直接用动态的GIF图片，这个方案是用PNG图片加上背景颜色来模拟静止的加载图片，然后利用css中的animation处理图片的旋转。相

06

前端成神之路-品优购项目(一)

项目名称：品优购项目描述：品优购是一个电商网站，我们要完成首页、列表页、详情页、注册页面的制作

02

scrapy爬取豆瓣电影教程

为了方便调试，在这里我们先在Windows10系统进行编码，然后在阿里云服务器上运行

03

Web前端开发技术栈

前端领域的发展非常迅猛，大前端的时代到来了，据说每隔12-24个月，前端的难度将增加一倍，从下面的技术栈就可以看出前端领域的丰富度和复杂度核心概念 HTML |-- DOM |-- Element |-- Attribute JavaScript |-- 原型 Prototype |-- 作用域 Scope |-- 闭包 Closure |-- JSON |-- AJAX CSS |-- 选择器 Selector |-- 优先级 |-- 特性 Specificity |-- 盒子模型渲染引擎 |-- T

09

移动端web开发笔记

这是一个最好的时代，因为我们站在潮流中；但也是一个最坏的时代，因为我们站在潮头上。 META相关

02

【说站】css中hack的原理

1、浏览器对CSS样式的支持程度、分析结果和识别CSS的优先级，可以根据这些的特征写出不同的CSS样式代码。

03

机制和原理——弹性盒布局

弹性盒布局(Flexible Box Layout,简称Flexbox)，是 CSS3 规范中提出的一种新的布局方式。该布局模型的目的是提供一种更加灵活的方式来对一个容器中的条目进行排列、对齐和分配空白空间。

01

爬虫中正确使用User Agent和代理IP的方式

有一些网站不喜欢被爬虫程序访问，所以会检测连接对象，如果是爬虫程序，也就是非人点击访问，它就会不让你继续访问，所以为了要让程序可以正常运行，需要隐藏自己的爬虫程序的身份。此时，我们就可以通过设置User Agent的来达到隐藏身份的目的，User Agent的中文名为用户代理，简称UA。

03

Flutter For Web实践

Flutter For Web已经发布一年多时间，它的发布意味着我们可以真正地使用一套代码、一套资源部署整个大前端系统（包括ios、Android、Web）。经过一段时间的探索，使用Flutter For Web技术开发了移动端可视化编程平台——Flutter乐高，在此分享使用Flutter For Web实践过程和踩坑实践，欢迎交流探讨。

02

在网页中使用自定义字体

@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体，你们当中或许有许多人会不自然的问，这样的东西IE能支持吗？当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶。我的Blog就使用了许多这样的自定义Web字体，比如说首页的Logo，Tags以及页面中的手写英文体，很多朋友问我如何使用，能让自己的页面也支持这样的自定义字体，一句话这些都是@font-face实现的，为了能让更多的朋友知道如何使用他，今天我主要把自己的一点学习过程贴上来和大家分享。

01

【ES6】promise 模式

(当绑定方法时，如果 promise对象已经处于 fulfilled 或 rejected 状态，那么相应的方法将会被立刻调用，所以在异步操作的完成情况和它的绑定方法之间不存在竞争条件。)

02

ES6学习之函数传参

ECMAScript 6 (or ECMAScript 2015) is the newest version of the ECMAScript standard and has remarkably improved parameter handling in JavaScript. We can now use rest parameters, default values and destructuring, among other new features. PS：这篇文章主体是根据Faraz

02

ES6学习之函数传参

该文摘要总结

ES6学习之函数传参

PS：这篇文章主体是根据Faraz Kelhini的文章（见引用1）翻译而来，加入了自己的一些理解。

02

如何使用Web Share API[每日前端夜话0x84]

Web Share API 自从它首次在Android 版 Chrome 61中推出以来，似乎已经不再受到关注。从本质上讲，它提供了一种方法，可以直接从网站或 Web 应用中共享内容（例如链接或联系人卡片）时触发设备（如果使用 Safari 桌面也可以）的本机共享对话框。

01

怎样只使用 CSS 进行用户追踪？

译者：黄梵高 https://juejin.cn/post/6887478219662950414

02

第141天：前端开发中浏览器兼容性问题总结（二）

在浏览器中想要垂直居中，设置vertical-align:middle; 不起作用。例如：ie6下文本与文本输入框对不齐，需设置vertical-align:middle，但是文本框的内容不会垂直居中

02

单屏页面响应式适配玩法

把公共的页头、页脚、导航栏、边框放到最顶层，比方说设置层级为 999，其他每个独立页则放在下面，然后切换页面的时候更新独立页的层级以达到效果图的效果（当然不能超过最顶层）。

02

基于 jQuery支持移动触摸设备的Lightbox插件：Swipebox使用说明

Swipebox是一款支持桌面、移动触摸手机和平板电脑的jquery Lightbox插件。该lightbox插件支持手机的触摸手势，支持桌面电脑的键盘导航，并且支持视频的播放。

02

04-移动端开发教程-在线字体

在IE4开始微软就已经开始支持在线字体，不过没有流行起来，直到CSS3新增加了font-face模块，正式纳入了web开发的标准。也渐渐流行起来而且发掘了很多其他应用。 1. 为什么要用在线字体问题精灵图（雪碧图）用作背景的时候不能轻易的放大缩小。低质量的位图在高清设备上放大后会有难看的锯齿，无法满足响应式页面的开发需求在线字体带来的革命：在线字体本质就是文字，但是也可是像图形的文字。节省了带宽（相比图片）字体文件大小也不大（一般几百k）。在线字体本身是矢量的，放大缩小都不会失真可以灵活的通过

06

The Mystery Of The CSS Float Property

数年前，当开发者首次开始不使用table 来布局网页时，CSS中的一个property突然间显得格外重要，该属性就是float。float属性变得如此常用的原因在于：默认情况下，在一个以列布局的方式中 block-level元素之间不会对齐。因为column在实际的CSS布局中是常用且必需的，所以float属性逐渐地被极多地采用(甚至滥用)。

02

我的职业是前端工程师【五】: 前端工程师必会的六个调试技能

我还是一个野生程序员的时候，不会 Debug，只会傻傻地写一句句 std::count。即使是在今天，有些时候我也会这样做：打一个 console.log，然后看看结果是不是和预期的一样。如果不是和预期一样，就修改一下代码，刷新一下浏览器。这得亏是 JavaScript 是一门动态语言，可以很快的看到运行的结果。前言：本章里，主要介绍如何调试前端应用——基本的调试： HTML、CSS 和 JavaScript；使用网络工具对 API 进行测试；对移动设备进行调试：使用浏览器的模拟器、真机、iOS 模拟；

自动化-Appium-第一个Demo-Web（Python版）

本章Web所指的是移动端（模拟器/真机）里的浏览器（如：Chrome、Safari）。

01

04-移动端开发教程-在线字体图标

本文主要介绍了在移动端网页开发中，如何利用web font和自定义字体实现字体图标。首先介绍了字体图标的原理和分类，然后介绍了如何在移动端网页中使用字体图标。最后列举了几个常用的字体图标工具，以及如何在这些工具中使用自定义字体。

06

Web App 相关技术

上面这个 slide 资料讲的非常好，算是一个入门的介绍吧。带我们建立基本的移动 web 开发知识体系和常见问题的实践。包含以下几个方面：

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭