今天在做移动端的页面，无意间发现了一个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. win7系统激活最简单方法

    利用激活工具快速激活WIN7系统! 工具/原料 小马Oem7.未激活的WIN7系统 步骤/方法 1 复制BT种子 http://www.pccppc.com/download/oem7F.rar粘贴到 ...

  2. 网口扫盲三:以太网芯片MAC和PHY的关系

    转载:http://www.cnblogs.com/jason-lu/articles/3195473.html   问:如何实现单片以太网微控制器? 答:诀窍是将微控制器.以太网媒体接入控制器(MA ...

  3. 深入研究Block用weakSelf、strongSelf、@weakify、@strongify解决循环引用（上）

    深入研究Block捕获外部变量和__block实现原理 前言 在上篇中,仔细分析了一下Block的实现原理以及__block捕获外部变量的原理.然而实际使用Block过程中,还是会遇到一些问题,比如R ...

  4. BootStrap2学习日记8---表单

    <form> <label for="username">用户名</label> <input id="username&quo ...

  5. DataTables warning (table id = 'myTable'): Requested unknown parameter '0' from the data source for row 0

    第一种方式:不用在js里设置列Html: <table id="myTable"> <thead> <tr> <th>Title-1 ...

  6. Autowired properities class

    1. Properties类 @ConfigurationProperties(locations = "classpath:build.properties") @JsonInc ...

  7. 关于FastStone Capture输入中文出现乱码.

    关于FastStone Capture 中输入中文出现乱码. 根据我的使用,公司用的生产机是英文操作系统,这个时候用FSCapture输入中文就是乱码.英文是正常的. 自己的机器是中文的.输入中文和英 ...

  8. hdu 4417 划分树

    思路:二分枚举区间第k大.用划分树查找是否符合要求的高度. #include<iostream> #include<algorithm> #include<cstdio& ...

  9. hdu 3401 单调队列优化动态规划

    思路: 动态方程很容易想到dp[i][j]=max(dp[i][j],dp[i-w-1][j-k]-k*ap[i],dp[i-w-1][j+k]+k*bp[i]): dp[i][j]表示第i天拥有j个 ...

  10. js如何判断一个数组中是否有重复的值

    引自:http://bbs.tianya.cn/post-414-38497-1.shtml 方法一: var ary = new Array("111","22&quo ...