safari浏览器rotate旋转元素导致其他元素穿插

最新推荐文章于 2023-02-17 16:24:24 发布
最新推荐文章于 2023-02-17 16:24:24 发布
阅读量629 收藏 2
点赞数 2
分类专栏： css 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jinxinlive/article/details/110222452
版权

问题描述

使用rotate渲染元素在ios上定位的元素会穿插rotate旋转的元素
在这里插入图片描述

问题原因

在safari浏览器下，当我们使用3D transform变换的时候，如果父元素没有overflow:hidden/scroll/auto等限制，则会直接忽略自身和其他元素的z-index层叠顺序设置，而直接使用真实世界的3D视角进行渲染。

解决方法

用魔法打败魔法 用transform z轴变换。添加元素距离。最小距离是 旋转元素的高度*sin(旋转角度)

斤斤丶
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
canvas 图片拖拽旋转之二——canvas状态保存(save和restore)
lmrylll的博客
04-25 697
在上一篇日志“canvas 图片拖拽旋转之一”中，对坐标转换有了比较深入的了解，但是仅仅利用坐标转换实现的拖拽旋转，会改变canvas坐标系的状态，从而影响画布上其他元素的绘制。因此，这个时候需要用到一对canvas方法，在变换坐标系前保存canvas状态，在变换并绘制完成之后，恢复canvas状态，即save()和restore()。save() 把当前状态推入到栈中，而 restore() 从栈的顶端弹出最近保存的状态，并且根据这些存储的值来设置当前绘图状态。
safari css3 rotate,Safari上的CSS3 rotateY过渡中的错误？
weixin_39647499的博客
08-04 277
我正在使用CSS3过渡显示模态弹出窗口(主要是从Effeckt.css借来的).它适用于除Safari之外的所有现代浏览器.在Safari中,运动正常,但背景色不均匀.在问题解决之前问题的屏幕截图.您可以看到div的一半正确着色为白色,一半仍然是透明的.这是CSS的相关部分(.effeckt-show和.md-effect-8在单击按钮时应用,以显示模态)：.effeckt-modal {visi...
css3 rotateY 会盖住下面的元素
newmiracle学习天地
03-07 1444
css3 rotateY 会盖住下面的元素 要适当的调整 -webkit-transform: rotateY(-40deg); -webkit-transform: rotateY(40deg);查看原文：http://newmiracle.cn/?p=1308
解决‘底层的图层经过transform:rotate转换后，覆盖住高图层’的问题
zhl_cafe的博客
06-23 7518
一、问题：          问题背景：在写H5的时候，因为要使z-index:0的红旗这张图片达到飘摇的动效，所以需要加transform:rotateX() rotateY()进行角度旋转转换；          问题出现：动效是有了，但是层级感觉变了，有种变成了z-index：无穷大 的感觉，z-index好像已经失效了。 二、思路：       知道是层级的问题，就找和z-ind
CSS3使用过渡转换和动画实现3D旋转盒子
王飞
01-08 1241
在网络快速发展的今天，静态web页面早已经不满足人们的需求，因此我们需要更加炫酷的动画渲染页面，使得我们的页面逼格满满，在css3中动画的表现形式有过渡，2d动画和3d动画，给用户一种耳目一新的全新体验。 过渡（transition） 个人理解的过渡指的是某种元素的某种状态在一定的时间段内发生的变化叫做过渡。 div:hover{ width: 200px; height: 200px; } ...
关于transform: rotate(deg);设置在windows上的safari失效问题
qq_32814555的博客
01-19 1825
需要设置 -webkit-transform: rotate(deg)
iphone的safari浏览器中实现全屏浏览的方法
01-05
（就在Safari浏览器最下方，最中间的那个位置，点击选择即可）这个功能类似于把网页地址作为一个超链接的方式放到手机桌面，并且可以直接访问。不过要注意的是每个链接都需要js进行一次特殊处理，那就是监听页面点击...
javascript实现阻止iOS APP中的链接打开Safari浏览器
10-25
当用户在Web APP中点击一个链接，系统通常会默认使用Safari浏览器来打开外部链接，这可能破坏Web APP的整体用户体验。 描述中提到的解决方案是通过JavaScript代码来检测用户的设备环境，并在必要时阻止链接在Safari...
Safari浏览器自定义CSS样式表
最新发布
01-23
1、全局正文苹方字体 ...4、针对Mac电脑的Safari浏览器进行了简单的适配优化 5、适用Mac端，不适用于Ios端 说明：用到了"SF Pro"英文字体和“SF Mono”等宽两种字体，可以到苹果官网下载安装，或下载后直接安装使用。
safari浏览器jquery搜索框效果特效代码
03-20
在Safari浏览器中，可能需要特别注意的是，与其他浏览器可能存在的一些兼容性问题。由于Safari内核基于WebKit，有些CSS属性或JavaScript API可能与其他基于 Blink 或 Gecko 的浏览器有所不同。因此，在编写代码时，...
关于CSS3中transform属性对元素布局的影响。
C860_zy的专栏
12-26 5239
今天了解transform属性时发现一个奇怪的现象，就是使用transform属性的时候，无论是translate,rotate,skew还是scale，对于伪元素:after和:before，都会产生影响。具体的这个影响体现在哪里呢？我们通过一个例子来看一看（以下代码均针对webkit内核浏览器，其它浏览器鄙人还未去尝试）： 先贴代码：
transform-style: preserve-3d在iphone下的bug
weixin_30825199的博客
03-05 976
经测，当元素设置transform-style: preserve-3d;后，其实现rotateY时的动画效果会穿透上层的覆盖图层。 马克一下 转载于:https://www.cnblogs.com/meanhow2013/p/5244577.html...
css3 transform动画导致IOS 手机层级错乱问题
weixin_42210000的博客
02-17 635
css3 层级
before css 旋转_CSS 巧用 :before和:after（转 原po野兽'）
weixin_39622398的博客
12-20 268
什么是:before和:after？ 该如何使用他们？:before是css中的一种伪元素，可用于在某个元素之前插入某些内容。:after是css中的一种伪元素，可用于在某个元素之后插入某些内容。下面我们先跑个简单的代码测试下效果：p:before{content: "H" /*:before和:after必带技能，重要性为满5颗星*/}p:after{content: "d" /*:befo...
before css 旋转_你所不知的 CSS ::before 和 ::after 伪元素用法
weixin_39837041的博客
12-20 272
Creative Button Styles一 基本语法在了解进阶的应用之前，先来了解一下语法规则。平常仅仅需要将这两个伪元素用于添加一些自定义字符时，只需使用伪类使用的单冒号写法，以保证浏览器的兼容性：p:before {}不过，在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号，因此如果使用了 display 或者 width 等属性时使得显示脱离了原本元素后，建议按照标准双写。过于老...
CSS transform的rotate，内部元素旋转到背后仍会显示。
cithegod的博客
11-09 6934
在写代码的时候出现了一个问题，当使用了CSS3的transform的时候，对下面这个元素进行旋转：//DOM元素的结构 <figure class="img-figure"> <img src="/assets/97aa04cee801bdd3b8762057267d0767.jpg" alt="This is a beauty"> <figcaption> <h2
css 调节图层
fly_on_the_sky的博客
05-08 4296
在CSS中相对或绝对定位，可以使用z-index调整图层的上下关系。z-index值越大，越在最上面。所有主流浏览器都支持 z-index 属性。下图为示意图：所以解决方法就是在弹出的大图设置其z-index大于下面的元素就可以了。1li span{position:absolute;z-index:15;}...
Transform【变形】属性
精彩人生
02-11 6053
来源：http://www.w3cplus.com/content/css3-transform 今天开始我们一起来学习有关于CSS3制作动画的几个属性：变形(transform)、转换(transition)和动画(animation)等更高级的CSS3技术。本文主要介绍的是这三个属性之中的第一个──变形transform。 Transform字面上就是变形，改变的意思。在CSS3中tr
解决 iOS 上 transform rotate 兼容问题
鲸落
08-18 2643
用css3 rotate 写旋转动画，web端chrome浏览器没问题，在移动端iOS上动画不生效，打开Safari浏览器，果然不生效； rotate 难道存在兼容问题？
getDisplayMedia适配Safari浏览器
03-28
getDisplayMedia是一个Web API，用于在浏览器中捕获屏幕、窗口或选定区域的视频流，并在用户授权后将其共享给其他用户。在Safari浏览器中，getDisplayMedia可以通过以下步骤进行适配： 1. 安装最新版本的Safari...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

斤斤丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值