今天在做移动端的页面，无意间发现了一个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. 思科(Cisco)路由器策略路由配置详解

    策略路由是路由优化的常用方法.在做路由牵引时很多情况都要用到策略路由.我刚刚接触思科这东西,对策略路由的配置还不太熟悉,今天终于配好了,记录一下. 网络拓扑 R2的E1\E2口分别与R3的E1\E2口 ...

  2. php生成excel或php生成csv

    一.php生成excel 使用phpexcel类文件生成 二.php生成csv <?php$action ="make";if ($action=='make'){ $fp ...

  3. liunx 文件相关

    一.linux中 文件属性以 l.b.c.d.开头的都是什么文件? lrwxrwxrwx 1 root root 11 Aug 20 08:38 core -> /proc/kcoredrwxr ...

  4. __attribute__机制介绍

    转载:http://blog.csdn.net/ithomer/article/details/6566739 1. __attribute__ GNU C的一大特色(却不被初学者所知)就是__att ...

  5. [未完成]关于CSS的总结

    CSS和html 数据和样式分离,在java中称为降低了耦合性. css和html相结合的第一种方式. 1,每一个html标签中都有一个style样式属性.该属性的值就是css代码. 2,使用styl ...

  6. JVM 垃圾回收 Minor gc vs Major gc vs Full gc

    关于垃圾回收机制及比较请参见:http://colobu.com/2015/04/07/minor-gc-vs-major-gc-vs-full-gc/ http://colobu.com/2014/ ...

  7. hdu 2196 树形dp

    思路:先求以1为根时,每个节点到子节点的最大长度.然后再次从1进入进行更新. #include<iostream> #include<cstring> #include< ...

  8. Codeforces Round #191 (Div. 2)

    在div 188中,幸运的达成了这学期的一个目标:CF1800+,所以这次可以打星去做div2,有点爽. A.Flipping Game 直接枚举 B. Hungry Sequence 由于素数的分布 ...

  9. hihocoder 1038 01背包

    #1038 : 01背包 时间限制:20000ms 单点时限:1000ms 内存限制:256MB 描述 且说上一周的故事里,小Hi和小Ho费劲心思终于拿到了茫茫多的奖券!而现在,终于到了小Ho领取奖励 ...

  10. Web前端学习笔记2

    一.开发工具sublime的常用快捷键. 1.                     快捷键                        功能 ctrl+shift+D 快速复制 ctrl+L 快 ...