首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

safari和IE 11中的页面重定向动画不起作用

在Safari和IE 11中,页面重定向动画可能不起作用的原因是由于浏览器对CSS动画和过渡的支持不完全或存在兼容性问题。以下是一些可能的解决方案:

  1. 检查CSS动画和过渡的兼容性:在Safari和IE 11中,某些CSS属性和动画效果可能不被支持或存在差异。可以通过查阅各浏览器的官方文档或Can I use网站来了解各浏览器对CSS属性和动画的支持情况。
  2. 使用JavaScript实现动画效果:如果CSS动画在某些浏览器中不起作用,可以考虑使用JavaScript库或框架来实现动画效果。例如,可以使用jQuery、GSAP或Animate.css等库来创建跨浏览器兼容的动画效果。
  3. 检查重定向代码:确保重定向代码没有错误或逻辑问题。可以使用浏览器的开发者工具来检查网络请求和重定向的情况,以确定是否存在问题。
  4. 测试其他浏览器:除了Safari和IE 11,还应该测试其他流行的浏览器,如Chrome、Firefox和Edge,以确保动画在各个浏览器中都能正常工作。

总结起来,解决Safari和IE 11中页面重定向动画不起作用的问题可以通过检查CSS兼容性、使用JavaScript实现动画、检查重定向代码和测试其他浏览器来解决。请注意,以上解决方案仅供参考,具体解决方法可能因具体情况而异。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

关于拖拽功能在IE11 、FirefoxSafari中不兼容问题

拖拽功能不兼容主要有4大主要原因: 1是eventpath属性引起bug(ie,firebox,safari) 2是eventdataTransfer.setData属性(ie,firebox...) 3是firefox在拖动时候会打开一个新窗口 (firbox) 4是ie11不支持onclick属性方法 ; ie11 里元素对象attributes排序其他浏览器不同, ie11 中...remove()方法不work (ie) 对于原因1解决方案 其中IE11 压根就不支持path属性,firefoxSafari还勉强通过hack方式获取到path,获取方式如下: const...对于原因2解决方案 IE11, firefox 都有dataTransfer.setData问题, Safari没有可以不用管。...对于原因3解决方案 在页面初始化时候加上以下代码 document.body.ondrop = function (event) { event.preventDefault()

3.2K30

IE内核浏览器404页面问题IE自动缓存引发问题

本站404页面IE替换成IE自己404页面 在权限设置正确情况下,自定义404页面文件大小如果小于512字节,那么IE内核浏览器会认为你自定义404页面不够权威,从而使用其自带404页面代替...在非IE内核浏览器,如火狐浏览器、谷歌浏览器等均能正常显示。 解决方法: 为404页面添加多一些内容,使其大小大于512字节即可。...IE自动缓存 在默认情况下,IE会针对请求地址缓存Ajax请求结果; 在缓存过期之前,针对相同地址发起多个Ajax请求,只有第一次会真正发送到服务端; 在某些情况下,这种默认缓存机制并不是我们希望...meta 属性有两种:namehttp-equiv。...="Page-Exit" contect="revealTrans(duration=20,transtion=6)">设定进入离开页面特殊效果,这个功能即FrontPage中“格式/网页过渡”

1.6K50

兼容性测试工具分享

IETester可以在独立标签页中开启IE5.5、IE6、IE7,IE8 ,IE9,IE10,IE11这7个不同版本IE,原则上支持WIN8 desktop,WIN7,XPVista操作系统。...3)有一些已知错误或者限制现在还没解决,比如前进/后退可能不起作用,焦点可能不起作用,“alert”或者“confirm”方法可能不起作用,CSS或者FLASH可能不起作用(有时候用管理员房方式运行可解决...SuperPreview可以让你设计制作好网页在IE不同版本以及Chrome、FireFoxSafari浏览器呈现效果,而且还提供像firebug或者是微软开发者工具一样功能,对于调试页面将会非常有力...根据微软介绍,SuperPreview可用IE版本视系统已安装IE浏览器版本而定,如果系统安装了IE8,那SuperPreview浏览器测试可用版本就包括IE8、IE7IE6;如果系统安装了IE7...,那SuperPreview只包括IE7IE6;如果系统安装了IE6,那SuperPreview只能测试IE6。

3.7K80

从零开始学 Web 之 CSS3(六)动画animation,Web字体

一、动画 1、创建动画前端工程师,会更注重用户体验交互。那么动画就是将我们静态页面,变成具有灵动性,为我们界面添加个性一种方式。...TureTpe(.ttf)格式 .ttf字体是WindowsMac最常见字体,是一种RAW格式,支持这种字体浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10...,他是一个开放TrueType/OpenType压缩版本,同时也支持元数据包分离,支持这种字体浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1...SVG字体渲染一种格式,支持这种字体浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+ 3、使用步骤 需要注意是,我们在使用 Web...下图为一个网站生成下载web字体网站,点击立即使用就可以了: ? 下载下来之后,把下在下来所有文件导入自己项目,注意路径匹配问题。

1.3K10

网站页面滚动加载动画JS特效(二)

昨天发布了网站页面滚动加载动画JS特效,但是加载页面并不怎么完美,文章页面不能直接加载出来,需要滚动条继续下来,可能是没有调节js导致,所以今天又重新测试了wow.js,感觉这个不错,很喜欢,有兴趣可以测试下...页面在向下滚动时候,有些元素会产生细小动画效果。虽然动画比较小,但却能吸引你注意。比如刚刚发布 iPhone 6 页面(查看)。如果你希望你页面也更加有趣,那么你可以试试 WOW.js。...浏览器兼容 IE10+ Chrome Firefox Opera Safari IE6、IE7 等老旧浏览器不支持 CSS3 动画,所以没有效果;而 wow.js 也使用了 querySelectorAll...方法,IE 低版本会报错。...) data-wow-delay(动画延迟时间)属性,如: <div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s

7.3K30

CSS33D变换动画

3 @transfrom兼容性 IE10,firefox以及Opera支持@keyframe,而chromesafari需要加浅醉-webkit-,IE9及早期IE版本是不支持,所以这些功能一般是在移动端使用...3 animation 所有动画属性简写属性,除了 animation-play-state 属性。 3 animation-name 规定 @keyframes 动画名称。...3 @keyframe兼容性 IE10,firefox以及Opera支持@keyframe,而chromesafari需要加浅醉-webkit-,IE9及早期IE版本是不支持,所以这些功能一般是在移动端使用... Chrome */ -o-animation: myfirst 5s; /* Opera */ } 一个H5上应用场景 H5页面分屏时候,底部一般会有一个小三角上下移动,表示还有一页内容...动画没什么特别,主要是变来变去过程中用到了一些新东西。

1.2K11

CSS33D变换动画

3 @transfrom兼容性 IE10,firefox以及Opera支持@keyframe,而chromesafari需要加浅醉-webkit-,IE9及早期IE版本是不支持,所以这些功能一般是在移动端使用...3 animation 所有动画属性简写属性,除了 animation-play-state 属性。 3 animation-name 规定 @keyframes 动画名称。...3 @keyframe兼容性 IE10,firefox以及Opera支持@keyframe,而chromesafari需要加浅醉-webkit-,IE9及早期IE版本是不支持,所以这些功能一般是在移动端使用... Chrome */ -o-animation: myfirst 5s; /* Opera */ } 一个H5上应用场景 H5页面分屏时候,底部一般会有一个小三角上下移动,表示还有一页内容...动画没什么特别,主要是变来变去过程中用到了一些新东西。

1.5K60

页面跳转两种方式(转发重定向)区别及应用场景分析「建议收藏」

转发重定向区别详解 作为一名java web开发程序员,在使用servlet/jsp时候,我们必须要知道实现页面跳转两种方式区别联系:即转发重定向区别。...转发重定向选择 1、重定向速度比转发慢,因为浏览器还得发出一个新请求,如果在使用转发重定向都无所谓时候建议使用转发。...另外,重定向还有一个应用场景:避免在用户重新加载页面时两次调用相同动作。...但是如果在提交表单后,重新加载页面,执行保存方法就很有可能再次被调用。...同样产品信息就将可能再次被添加,为了避免这种情况,提交表单后,你可以将用户重定向到一个不同页面,这样的话,这个网页任意重新加载都没有副作用; 但是,使用重定向不太方便地方是,使用它无法将值轻松地传递给目标页面

1.6K21

网页页面下各种标签含义

#以上代码告诉IE浏览器,IE8/9及以后版本都会以最高版本IE来渲染页面。...注意事项: (1).根据官网定义X-UA-compatible 标头不区分大小写;不过,它必须显示在网页中除 title 元素其他 meta 元素以外所有其他元素之前。...如果不是的话,它不起作用 (2).content内容是IE=8,或者IE=edge等值,注意不是IE8或者直接写个edge值,否则不起作用 3、canonical : 这个标签是 Google、雅虎...*link rel="canonical"属性可以被传递,即A页面声明B为权威链接,B声明C为权威网页,则SE会认为C是AB共同首选权威版本。...meta viewport 标签首先是由苹果公司在其safari浏览器中引入,目的就是解决移动设备viewport问题。

1.6K10

网页页面下各种标签含义

#以上代码告诉IE浏览器,IE8/9及以后版本都会以最高版本IE来渲染页面。...注意事项: (1).根据官网定义X-UA-compatible 标头不区分大小写;不过,它必须显示在网页中除 title 元素其他 meta 元素以外所有其他元素之前。...如果不是的话,它不起作用 (2).content内容是IE=8,或者IE=edge等值,注意不是IE8或者直接写个edge值,否则不起作用 3、canonical : 这个标签是 Google、雅虎...*link rel="canonical"属性可以被传递,即A页面声明B为权威链接,B声明C为权威网页,则SE会认为C是AB共同首选权威版本。...meta viewport 标签首先是由苹果公司在其safari浏览器中引入,目的就是解决移动设备viewport问题。

1.7K10

实战|这个炫酷播放粒子效果,你也可以学会!使用Web动画API制作

当谈到运动动画时,可能没有什么比粒子更让我喜欢了,这就是为什么每次我探索新技术时,我总是以尽可能多创建粒子来演示。...在本文中,单击按钮时,我们将使用Web Animations API创建烟花效果,从而制作更多粒子魔术。 效果如下 ? 本文演示完整代码已经放在我博客小码页面 ? 让我们开始吧!...---- 浏览器支持 在我撰写本文时,除了SafariInternet Explorer(IE是全民公敌、Safari是新时代IE)之外,所有主流浏览器至少部分支持Web动画API。...Safari支持可以在“实验性特性”开发人员菜单中启用。 这个浏览器支持数据来自Caniuse。数字表示浏览器支持该版本及以上功能。 ?...我们还将删除指针事件,以避免HTML粒子在屏幕上时与用户任何交互。 因为样式化按钮页面布局并不是本文真正目的,所以我将把它放在一边。

99610

jQuery实现元素鼠标移入移出及点击显示隐藏(微信二维码)

它是轻量级js库 , 它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+), jQuery2.0及后续版本将不再支持...jQuery能够使用户html页面保持代码html内容分离,也就是说, 不用再在html里面插入一堆js来调用命令了,只需要定义id即可。...它是轻量级js库 ,        它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),        jQuery2.0及后续版本将不再支持...jQuery能够使用户html页面保持代码html内容分离,也就是说,        不用再在html里面插入一堆js来调用命令了,只需要定义id即可。...jQuery能够使用户html页面保持代码html内容分离,也就是说,        不用再在html里面插入一堆js来调用命令了,只需要定义id即可。

3.7K00

CSS入门总结(下)

OK,回忆到此为止,其实现在大家就已经可以很好做一个静态页面了,但是呢,虽然CSS能够用于控制网页样式布局,而CSS3才是最新CSS标准,而且HTML5+CSS3王道组合往往能够达到事半功倍效果...主要分为以下模块:选择器、盒模型、背景边框、文字特效、2D/3D转换、动画、多列布局、用户界面。...: translate(50px,100px); /* IE 9 */ -webkit-transform:translate(50px,100px); /* Safari and Chrome */...:skew(30deg,20deg); /* Safari and Chrome */ } 5)matrix()包含旋转,缩放,移动(平移)倾斜功能。...关于动画方面,后面会出一个动画专题来讲哟,不要着急~~而且兔妞后续也会为大家整理一份兔妞自己学习CSS学习脑图,敬请期待呢~ 好啦,今天内容到这里就结束啦,信息量可能有点大,那么收获是不是也非常大呢

1K20

网站页面滚动加载动画JS特效

终于尘埃落定了,前段时间忙不可开交,结婚,工作,因为婚假+年假一起休,导致很长时间没有更新博客了,今天抽空给大家带来了一个js特效,网站模块延迟加载动画,假期之前就想着制作这个功能,页面滚动加载...简介  WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画 JavaScript,能让页面更加有趣,更吸引用户眼球。...虽然 scrollReveal.js 不依赖 animate.css,但它动画也是用 CSS3 创建,所以它不支持 IE10 以下浏览器。...浏览器兼容 IE10+ Chrome Firefox Opera Safari IE6、IE7 等老旧浏览器不支持 CSS3 动画,所以没有效果,并且因为不支持一些属性或方法会报错...如果不喜欢这个可以试试wow.js,网站页面滚动加载动画JS特效(二)。

11.3K20

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

是否延迟执行过渡 否 不填写时默认为0 transition-property需要交代给你那些事 指定这个属性值改变时,就会有动画效果,所以你想看谁 (属性) 动画(不是笑话哦),这个值就填谁...前两个是必填,否则不起作用 js里写法: obj.style.transitionDuration = '3.5s'; transition-timing-function需要交代给你那些事 规定过渡效果速度曲线...浏览器兼容性 IE10+,Firefox、Chrome 以及 Opera 支持 transition 属性。 Safari、Chrome<25 需要前缀 -webkit-。...贝塞尔曲线 运动曲线是动画灵魂 ease-in 缓入,从0开始加速,适合元素离开页面的时候。 ease-out 缓出,有一个刹车感觉,速度逐渐变没。...适合一个元素进入页面的 时候 ease-in-out 缓入缓处,开头结尾都没有速度,先加速,再减速。适合用在一个元素从页面a到b点。 linear 匀速,死板别用。

1K30

性能报告之HTML5 性能测试报告

Canvas 绘图性能测试测试发现在禁用硬件加速情况下,Chrome、Opera、Firefox、SafariIE 均无法绘 制 7680 x 3240 分辨率页面,浏览器表现出页面显示不全现象... Safari:在Windows系统下无法正常渲染页面,表现出卡顿,页面显示不全现象。  IE11:650-700个对象,CPU利用率3%-3.5%,内存160MB。... IE浏览器:测试过程中CPU持续在9%-11%。 ?  Safari:测试过程中CPU持续在8%-10%。 ?... WEB页面应采用局部刷新方式进行数据更新,避免全屏刷新。  当页面元素较多时,应避免执行全屏动画。  动画效果所影响区域面积越小,动画效果越流畅。...2、如何为您网站在 Canvas SVG 之间做出选择:https://msdn.microsoft.com/zh-cn/ie/hh377884/。 ?

2.7K10

js动画css动画_js文件怎么引入html

在做页面中,多数情况下都会遇到页面上做动画效果,我们大部分做动画时候都是使用框架来做(比如jquery),这里我介绍下如何让通过原生js来实现像框架一样动画效果!...准确地说,在我测试浏览器中,IE8Opera 11弹出了“object CSSStyleDeclaration”;FF 12、chrome 14、safari 5则弹出“undefined”。...getComputedStyle(oAbc,false).width); } 一个空白页面中bodyid=”abc”,测试以上代码,IEOpera弹出“auto”,其它三款浏览器则弹出“***px”...虽然结果不同,但是可以发现chromesafari也都火狐一样,顺利地读取到了属性值。...^_^ 支持currentStyle:IE、Opera 支持getComputedStyle:FireFox、Chrome、Safari 注意最后弹出内容,currentStyle返回浏览器默认值”

22.1K20

通过css来开启硬件加速提升网页应用流畅性

在进行网页开发中,经常会接触都网页动画,例如css3animations, transforms 以及 transitions,有时会发现有这些页面运行起来会感觉很卡顿,非常不流畅,预期相比相差很多...现在,像Chrome, FireFox, Safari, IE9+最新版本Opera都支持硬件加速,当它们检测到页面中某个DOM元素应用了某些CSS规则时就会开启,最显著特征元素3D变换。...2d应用,但是还是需要开启GPU加速来使页面流畅,这时,我们可以采用一种方法来欺骗浏览器开启GPU加速模式 例如我们可以用transform: translateZ(0); 来开启硬件加速 。...translateZ(0); /* Other transform properties here */ } 当我们使用CSS transforms 或者 animations时ChomeSafari...translate3d(0, 0, 0); transform: translate3d(0, 0, 0); /* Other transform properties here */ } 需要提醒就是只对需要进行动画效果元素使用上面的方法

1.2K20
领券