今天在做移动端的页面，无意间发现了一个Chrome浏览器下的一个bug，在使用CSS3的transform: translate(0, 0)属性对节点A进行位置转化，此时A节点下面有一个字节点B，节点B使用了position:fixed进行了定位，按照常理节点B应该悬挂在浏览器窗口视图上，不会跟随滚动条而滚动的，但是这个效果在Chrome浏览器下面是无效的，经过测试在IE11、Firefox、safari中均没有问题，在Opera中出现的效果和Chrome中完全一样。

总结一下：在Chrome和Opera浏览器下，使用CSS3的transform: translate(0, 0)转化位置节点，其所有使用position:fixed定位的子孙节点的定位功能均无效。

父节点使用css的transform: translate(0, 0)时position:fixed在chrome浏览器中无效的更多相关文章

  1. 小技巧css解决移动端ios不兼容position:fixed属性，无需插件

    移动端开发仿app头部底部固定设置position:fixed,android2.2以上已经实现.但是在ios8以下系统,当小键盘激活时,都会出现位置浮动问题.如图: 如何解决: 查阅资料之后想到一下 ...

  2. Juploader 1.0 谷歌(chrome)浏览器中成功上传文件后返回信息异常

    在项目中使用了Juploader 1.0无刷新上传文件的js组件,在IE8以上没有问题,代码如下: function InitialUploadDirectly(OnUploadFunc, butto ...

  3. Unity使用transform.Translate()移动子物体时遇到的小问题

    Unity使用transform.Translate()移动子物体时遇到的小问题 情况大概是这样:父物体A下有子物体B,希望使B在本地坐标系下移动1单位. B物体挂脚本代码如下: transform. ...

  4. 01.CSS动画-->transform

    transform: translate(参数1,参数2):让元素在X轴与Y轴方向发生偏移-->参数1:X:参数2:Y rotate(参数1):让元素进行旋转:单位(deg) scale(参数1 ...

  5. 二叉树中两节点的最近公共父节点(360的c++一面问题)

    面试官的问题:写一个函数  TreeNode* Find(TreeNode* root, TreeNode* p, TreeNode* q) ,返回二叉树中p和q的最近公共父节点. 本人反应:当时有点 ...

  6. Mysql 实现 向上递归查找父节点并返回树结构

    需求:通过mysql 8.0以下版本实现,一个人多角色id,一个角色对应某个节点menu_id,根节点的父节点存储为NULL, 向上递归查找父节点并返回树结构. 如果只有叶子,剔除掉; 如果只有根,只 ...

  7. 创建多个节点的集群 - Elastic Stack 8.0

    文章转载自:https://mp.weixin.qq.com/s/k6u9Q2nebW9qgZMghQwJng 详述如何安装3个节点的 Elasticsearch 集群.我将使用 Docker 来进行 ...

  8. CSS去除Chrome浏览器的控件默认样式

    html的input输入框在Chrome浏览器里是有默认样式的,当它获得焦点时,即使你没有为它设置:focus时的样式,Chrome浏览器还是会给它加上蓝色的边框,今天百度找到有个方法可以去除该默认样 ...

  9. position:fixed 相对父元素定位

    position:fixed是对于浏览器窗口定位的,要实现相当于父元素定位,可以这样: 不设置fixed元素的top,bottom,left,right,只设置margin来实现. 这种方法本质上fi ...

随机推荐

  1. 【ZZ】大数据架构师基础：hadoop家族，Cloudera系列产品介绍

    http://www.36dsj.com/archives/17192 大数据我们都知道hadoop,可是还会各种各样的技术进入我们的视野:Spark,Storm,impala,让我们都反映不过来.为 ...

  2. 文本编辑器Nano实用快捷键

    一.复制.剪切和粘贴文本 1.行复制.剪切和粘贴 Alt+6:复制光标所在行. Ctrl+K:剪切光标所在行. Ctrl+U:粘贴. 2.自由复制.剪切和粘贴 自由复制: Ctrl+6:设置复制文本的 ...

  3. 【完结】利用 Composer 完善自己的 PHP 框架（三）——Redis 缓存

    本教程示例代码见 https://github.com/johnlui/My-First-Framework-based-on-Composer 回顾 上两篇文章中我们完成了 View 视图加载类和 ...

  4. （转载）MatLab绘图

    转载自:http://www.cnblogs.com/hxsyl/archive/2012/10/10/2718380.html 转载自:http://www.cnblogs.com/jeromebl ...

  5. Http Statis 500 -错误笔记

    HTTP Status 500 - type Exception report message description The server encountered an internal error ...

  6. spring+hibernate+struts整合(1)

    spring+hibernate:整合 步骤1:引入类包 如下图:这里是所有的类包,为后面的struts整合考虑

  7. xmlns="http://schemas.xmlsoap.org/wsdl/"，这是什么意思，我只知道：xmlns：xx=....,

    表示没有prefix,相当于你的xsi为空.这个很常用,后面就省得每行都要加一个前缀了. 解决方案 » "后面就省得每行都要加一个前缀了",意思是,后面的子元素如果没有名称空间前缀 ...

  8. delphi xe5 android tts(Text To Speech)

    TTS是Text To Speech的缩写,即“从文本到语音”,是人机对话的一部分,让机器能够说话. 以下代码实现xe5 开发的文本转语音的方法 和访问蓝牙一样,这里用javaclass的接口实现 接 ...

  9. mac端口占用查找进程并杀死

    查找端口port被占用的进程 lsof -i tcp:port 杀死进程pid kill -9 pid

  10. saltstack实战4--综合练习3

    Saltstack配置管理-业务引用haproxy 在业务模块里写它的配置 各个业务是不同的,这里有差异性,所以没写在配置模块里. 对minion02也执行安装haproxy [root@master ...