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

今天在做移动端的页面，无意间发现了一个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浏览器中无效

时间： 2024-11-02 19:31:18

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

【css】修正ie6下不支持position:fixed

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta h

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

转载自:http://www.ithao123.cn/content-649841.html 移动端开发仿app头部底部固定设置position:fixed,android2.2以上已经实现.但是在ios8以下系统,当小键盘激活时,都会出现位置浮动问题.如图: 如何解决: 查阅资料之后想到一下几种解决方法 1,使用position:absolute模拟 <script type="text/javascript">     window.onscroll=function(

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

移动端开发仿app头部底部固定设置position:fixed,android2.2以上已经实现.但是在ios8以下系统,当小键盘激活时,都会出现位置浮动问题.如图: 如何解决: 查阅资料之后想到一下几种解决方法 1,使用position:absolute模拟 <script type="text/javascript">     window.onscroll=function(){     $(".fixed").css("top"

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

在项目中使用了Juploader 1.0无刷新上传文件的js组件,在IE8以上没有问题,代码如下: function InitialUploadDirectly(OnUploadFunc, buttonID, allowedExts) { $.jUploader({ button: buttonID, // 这里设置按钮id eventType: 1, //触发类型 addeventbutton: buttonID, // 要绑定事件的元素的id filenamed: buttonID + 'd

获取登录IP为0:0:0:0:0:0:0:1的解决办法

jsp页面中用request.getRemoteAddr()获取的IP地址竟然为0:0:0:0:0:0:0:1 换台机器IP显示正常,这是为什么呢,照道理讲,应该是127.0.0.1才对,为什么这个获取的值变成了ipv6了呢,而且我发现这种情况只有在服务器和客户端都在同一台电脑上才会出现(例如用localhost访问的时候才会出现),后来上网查了查原因. 原来是/etc/hosts这个东西作怪(在windows上应该是C:\Windows\system32\drivers\etc\ hosts这

CSS/Xpath 选择器 第几个子节点/父节点/兄弟节点

0.参考 1.初始化 In [325]: from scrapy import Selector In [326]: text=""" ...: <div> ...: <a>1a</a> ...: <p>2p</p> ...: <p>3p</p> ...: </div>""" In [327]: sel=Selector(text=text) In [

16、Cocos2dx 3.0游戏开发找小三之Node：父节点、子节点、傻傻分不清楚

重开发者的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/30476133 Cocos2d-x 采用了场景.层.精灵的层次结构来组织游戏元素, 与此同时,这个层次结构还对应了游戏的渲染层次,因此游戏元素可以组织成树形结构,称作渲染树. Cocos2d-x 把渲染树上的每一个游戏元素抽象为一个节点,即 Node. 一切游戏元素都继承自 Node,因此它们 都具有 Node 所提供的特性. Node 定义了一个可绘制

【JS学习笔记】DOM基础-字节点，父节点

一.DOM基础 (1)什么是DOM?DOM,即document,是用来操作页面上的元素,比如操作div获取,修改样式等.是JS的组成部分,还是一套规范. (2)浏览器的支持情况 现在主流的浏览器有3种,分别是IE,Chrome,Firefox. IE:在IE6-8版本中,对DOM的支持差不多是百分之十几差不多了,但是到了IE9就有了质的飞跃. Chrome:介于两者之间,在60%左右,对DOM支持的不是那么的好也不是那么的差. Firefox:对于DOM的支持几乎可以用99%来形容. 二.DOM

css010 css的transform transition和animation

css010 css的transform transition和animation 看着没有一个能想起他们是干什么的.. 1.         Transform    Transform(变形) rotate(旋转) transform:rotate(10deg);      顺时针旋转10度   (deg角度的度量单位) scale(缩放) transform: scale (2);         scale(缩放)调整元素的尺寸 (2代表倍数) transform: scale (2,5