当使用-webkit-change 时，固定的位置不起作用

经过一些研究，在 铬网站上已经有一个关于这个问题的 漏洞报告，到目前为止 Webkit 浏览器不能同时呈现这两种效果。

我建议只在样式表中添加一些 Webkit CSS，并将转换后的 div 作为一个图像，并使用它作为背景。

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Webkit-specific CSS here (Chrome and Safari) */


#transformed_div {
/* styles here, background image etc */
}
}

所以现在你必须用传统的方法，直到 Webkit 浏览器赶上 FF。

编辑: 截至2012年10月24日，漏洞还没有得到解决。

这似乎不是一个 bug，而是规范的一个方面，因为这两个效应需要单独的坐标系统和堆叠顺序。正如这个答案所解释的.

将 -webkit-transform添加到固定元素为我解决了这个问题。

.fixed_element {
-webkit-transform: translateZ(0);
position: fixed;
....
}

在我的 phonegap 项目中，webkit 转换-webkit-change: transateZ (0) ; 工作得非常出色。 它已经可以在 chrome 和 safari 中工作了，只不过不是移动浏览器。 还有一个问题是 WRAPPER DIV 在某些情况下没有完成。对于浮动 DIV，我们应用 clear 类。

<div class="Clear"></div> .Clear, .Clearfix{clear:both;}

对我有效的方法是使用 position:sticky:

.fixed {
position: sticky;
}

对于那些发现自己的背景图片在 Chrome 浏览器中消失的人来说，同样的问题也会出现——附件: 修复; ——这是我的解决方案:

// run js if Chrome is being used
if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
// set background-attachment back to the default of 'scroll'
$('.imagebg').css('background-attachment', 'scroll');


// move the background-position according to the div's y position
$(window).scroll(function(){


scrollTop = $(window).scrollTop();
photoTop = $('.imagebg').offset().top;
distance = (photoTop - scrollTop);
$('.imagebg').css('background-position', 'center ' + (distance*-1) + 'px');


});
}

实际上，我找到了另一种方法来修复这个“ bug”:

我有容器元素，持有与 css3动画页面。当页面完成动画时，css3属性具有值:。因此，我只是删除了这一行，所有的工作都按照它应该的位置进行: fix 将被正确显示。当 css 类被应用来翻译页面时，将添加翻译属性，并且 css3动画也可以正常工作。

例如:

.page {
top: 50px;
position: absolute;
transition: ease 0.6s all;
/* -webkit-transform: translate(0, 0); */
/* transform: translate(0,0); */
}
.page.hide {
-webkit-transform: translate(100%, 0);
transform: translate(-100%, 0);
}

演示: Http://jsfiddle.net/zwcd9/

可能是由于 Chrome 中的一个 bug，我无法在 Safari 或 Firefox 中复制，但是这个可以在 Chrome40.0.2214.111 http://jsbin.com/hacame/1/edit?html,css,output中工作

它是一个非常特殊的结构，所以它绝不是一个普遍适用的一行 css 修复程序，但也许有人可以对它进行修补，使其在 Safari 和 Firefox 中工作。

以下是我在所有测试过的浏览器和移动设备(Chrome，IE，Firefox，Safari，iPad，iphone5和6，Android)上使用的方法。

img.ui-li-thumb {
position: absolute;
left: 1px;
top: 50%;


-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}

如果对任何祖先应用转换，则元素的固定位置将被打破。

<div style='position:fixed;-.*-transform:scale(2)'>...</div> //ok


<div style='-.*-transform:scale(2)'>
<div style='position:fixed'>...</div> // broken
</div>

CSS 转换规范解释了这种行为。具有转换的元素充当固定位置子代的包含块，因此位置: 固定在具有转换的东西下面的东西不再具有固定的行为。

当应用于同一个元素时，它们确实起作用; 该元素将被定位为固定的，然后进行转换。

2016年8月和固定位置和动画/转换仍然是一个问题。对我来说唯一有效的解决方案是为子元素创建一个动画，这需要更长的时间。

请不要投票，因为这不是确切的答案，但可以帮助某人，因为这是快速的方式，只是关闭转换。 如果你真的不需要父母的变换，你希望你的固定位置再次工作:

#element_with_transform {
-webkit-transform: none;
transform: none;
}

如果你可以使用 javascript 作为一个选项，这可以作为一个解决方案，当固定元素在一个转换的元素中时，它相对于窗口定位:

  let fixedEl // some node that you is position
// fixed inside of an element that has a transform


const rect = fixedEl.getBoundingClientRect()
const distanceFromWindowTop = rect.top
const distanceFromWindwoLeft = rect.left
let top = fixedEl.offsetTop
let left = fixedEl.offsetLeft


if(distanceFromWindowTop !== relativeTop) {
top = -distanceFromWindowTop
fixedEl.style.top = `${top}px`
}


if(distanceFromWindowLeft !== relativeLeft) {
left = -distanceFromWindowLeft
fixedEl.style.left = `${left}px`
}

当然，您也必须调整您的高度和宽度，因为 fixedEl将计算它的基础上，它的容器。这取决于您的用例，但是这将允许您可预测地设置某些位置固定，而不管它的容器是什么。

添加一个动态类，而元素 forms.$('#elementId').addClass('transformed')。 然后用 css 声明,

.translatX(@x) {
-webkit-transform: translateX(@X);
transform: translateX(@x);
//All other subsidaries as -moz-transform, -o-transform and -ms-transform
}

那么

#elementId {
-webkit-transform: none;
transform: none;
}

那么

.transformed {
#elementId {
.translateX(@neededValue);
}
}

现在，如果在子元素上提供 top 和 z-index 属性值，则 position: fix 可以正常工作并保持固定，直到父元素转换为止。当转换恢复时，子元素将再次弹出为固定值。如果你实际上使用一个导航侧边栏，点击一下就可以打开和关闭，并且你有一个标签集，当你向下滚动页面时，它应该保持粘性，那么这应该会使情况变得容易一些。

我有这个问题，而试图实现反应颜色与反应滑动视图(rsw)。我的问题是，rsw 应用 translate(-100%, 0)到一个标签面板，打破默认的固定位置 div 添加到全屏幕，当点击关闭颜色选择器模型。

对我来说，解决方案是对固定元素应用相反的转换(在本例中是 translate(100%, 0)，它解决了我的问题)。我不确定这是否在其他情况下有用，但认为我会分享无论如何。

下面的例子展示了我上面描述的内容:

Https://codepen.io/relativemc/pen/vwweeez

在我的案例中，我发现我们不能在转换之前使用转换: tranateX ()。如果我们想同时使用这两种方法，我们应该使用转换。

如果你要动画回到原来的位置，在那里所有的翻译都是 0，你可以使用这个解决方案在你设置 transform: unset;:

  100% {
opacity: 1;
visibility: visible;
/* Use unset to allow fixed elements instead of translate3d(0, 0, 0) */
transform: unset;
}

我只是添加 transform: unset;到我的固定标题，这为我工作！

我也在使用 Next.js 的框架运动和我的固定头部有同样的问题，这似乎很容易修复它。

.header {
position: fixed;
transform: unset;
}

设置固定元素的 transform:unset;是为我工作。