今天在做移动端的页面，无意间发现了一个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】一张图清晰追溯数据库的发展历程（1962-2016年）

    http://www.cbdio.com/BigData/2016-02/24/content_4651751.htm 历史发展概述

  2. A Simple Actions Recognition System

    1. Problem Definition There's no doubt that researches and applications on the foundation of videos ...

  3. 为laravel分页样式制定class

    做的项目有一个上翻页和下翻页,使用了框架提供的

  4. php编程中容易忽略的地方

    一:fopen ( string $filename , string $mode [, bool $use_include_path = false [, resource $context ]] ...

  5. C语言之指针与数组总结

    和指针相关的问题口诀1: 1. 地址变量得地址,得谁地址指向谁 和指针相关的问题要画图: 内容变量画房子,指针画箭头 ---->口 ------------------------------- ...

  6. nodejs的mysql模块学习(三)数据库连接配置选项详解

    连接选项 当在创建数据连接的时候 第一种大多数人用的方法 let mysql = require('mysql'); let connection = mysql.createConnection({ ...

  7. Java基础知识强化103：Java常量池理解与总结

    一.相关概念 1. 什么是常量 用final修饰的成员变量表示常量,值一旦给定就无法改变! final修饰的变量有三种:静态变量.实例变量和局部变量,分别表示三种类型的常量. 2. Class文件中的 ...

  8. oracle定期运行job

    数据库:oracle 11g,操作都在pl/sql客户端完成 第一步.创建一个”E_P_FFM_STATE(fltdt in varchar2)“存储过程 第二步.打开Command Window,创 ...

  9. MySQL中的保留字

    本文转载自:http://www.cnblogs.com/lawdong/archive/2010/08/08/2357903.html ADD ALL ALTER ANALYZE AND AS AS ...

  10. [BigData]关于Hadoop学习笔记第一天(PPT总结)(一)

    适合大数据的分布式存储与计算平台 l作者:Doug Cutting l受Google三篇论文的启发   lApache 官方版本(1.0.4) lCloudera 使用下载最多的版本,稳定,有商业支持 ...