首页
学习
活动
专区
工具
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.3K30

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.7K50
  • 兼容性测试工具分享

    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.4K10

    网站页面滚动加载动画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.4K30

    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

    网页页面下各种标签含义

    #以上代码告诉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

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

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

    1.8K21

    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.8K00

    网页页面下各种标签含义

    #以上代码告诉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粒子在屏幕上时与用户任何交互。 因为样式化按钮页面布局并不是本文真正目的,所以我将把它放在一边。

    1.1K10

    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.4K20

    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 匀速,死板别用。

    1.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

    为什么要使用现代浏览器?

    我们知道一个网页主要组成部分是HTML、css以及javascript,其中HTML负责页面层级结构,css控制页面展现样式,javascript则肩负网页用户交互部分,而由于各个浏览器使用排版引擎不同...(上文已经说过)、javascript引擎实现标准也不同,所以才会出现兼容性问题,从而导致一个没有经过兼容性处理页面IE6、7、8、9、10、11,Chorme、FireFox、Safari、Opera...对于本文所提及现代浏览器:Chrome、Firefox、Safari、Opera,IE10+,先暂且算上IE9(其实IE9也不能真正属于标准现代浏览器),几乎没有兼容性问题,因为这几种浏览器内核...,一个经验较少前端甚至有可能在完成整个页面之后为了对付浏览器兼容性问题彻底改掉之前代码,并且,最重要是许多灰常牛x交互效果动画效果在这些古老浏览器上根本无法支持,举个小栗子:IE6不支持position...再举个栗子:CSS3已经走进了千家万户,用它实现动画效果已经可以媲美已经夕阳西下flash,但是当你做出一个超级棒动画时,这时候客户/项目经理/产品经理/运营/销售对你说:“呵呵,咱们应该支持低版本

    1.3K110
    领券