首页
学习
活动
专区
工具
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 、Firefox和Safari中不兼容的问题

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

3.4K30

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

本站404页面被IE替换成IE自己的404页面 在权限设置正确的情况下,自定义的404页面文件大小如果小于512字节,那么IE内核的浏览器会认为你自定义的404页面不够权威,从而使用其自带的404页面代替...在非IE内核的浏览器,如火狐浏览器、谷歌浏览器等均能正常显示。 解决方法: 为404页面添加多一些内容,使其大小大于512字节即可。...IE自动缓存 在默认情况下,IE会针对请求地址缓存Ajax请求的结果; 在缓存过期之前,针对相同地址发起的多个Ajax请求,只有第一次会真正发送到服务端; 在某些情况下,这种默认的缓存机制并不是我们希望的...meta 的属性有两种:name和http-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,XP和Vista操作系统。...3)有一些已知的错误或者限制现在还没解决,比如前进/后退可能不起作用,焦点可能不起作用,“alert”或者“confirm”方法可能不起作用,CSS或者FLASH可能不起作用(有时候用管理员房方式运行可解决...SuperPreview可以让你设计制作好的网页在IE不同版本以及Chrome、FireFox和Safari浏览器呈现效果,而且还提供像firebug或者是微软的开发者工具一样的功能,对于调试页面将会非常有力...根据微软的介绍,SuperPreview的可用IE版本视系统已安装IE浏览器的版本而定,如果系统安装了IE8,那SuperPreview浏览器测试可用版本就包括IE8、IE7和IE6;如果系统安装了IE7...,那SuperPreview只包括IE7和IE6;如果系统安装了IE6,那SuperPreview只能测试IE6。

    3.7K80

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

    一、动画 1、创建动画 好的前端工程师,会更注重用户的体验和交互。那么动画就是将我们的静态页面,变成具有灵动性,为我们的界面添加个性的一种方式。...TureTpe(.ttf)格式 .ttf字体是Windows和Mac的最常见的字体,是一种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

    CSS3的3D变换和动画

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

    1.2K11

    CSS3的3D变换和动画

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

    1.6K60

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

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

    1.9K21

    网页页面下各种标签的含义

    IE=edge"> #以上代码告诉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是A和B共同的首选权威版本。...meta viewport 标签首先是由苹果公司在其safari浏览器中引入的,目的就是解决移动设备的viewport问题。

    1.7K10

    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=edge"> #以上代码告诉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是A和B共同的首选权威版本。...meta viewport 标签首先是由苹果公司在其safari浏览器中引入的,目的就是解决移动设备的viewport问题。

    1.7K10

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

    当谈到运动和动画时,可能没有什么比粒子更让我喜欢了,这就是为什么每次我探索新技术时,我总是以尽可能多的创建粒子来演示。...在本文中,单击按钮时,我们将使用Web Animations API创建烟花效果,从而制作更多的粒子魔术。 效果如下 ? 本文演示和完整代码已经放在我的博客小码页面 ? 让我们开始吧!...---- 浏览器支持 在我撰写本文时,除了Safari和Internet 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的学习脑图,敬请期待呢~ 好啦,今天的内容到这里就结束啦,信息量可能有点大,那么收获是不是也非常大呢

    1.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、Safari、IE 均无法绘 制 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.8K10

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

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

    22.2K20

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

    我们知道一个网页的主要组成部分是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
    领券