4

I have a node that has background-attachment: fixed applied to it. The fixed background "breaks" if it follows a node that has a -webkit-transform applied to it, and I'm looking for a hack to fix that if anyone knows of one (e.g. there are multiple webkit css3 bugs that can be fixed with weird things like applying -webkit-perspective, etc).

Note that this isn't as simple as moving the nodes around. In my live code it breaks no matter what order the nodes are in (though I realize it doesn't in the jsfiddle)

And I already reported the bug, but a similar one (for position: fixed) has been open for over a year

example (http://jsfiddle.net/m3scX/2/):

<img src="http://d.tile.stamen.com/watercolor/5/25/13.jpg" />

<div id="parent">
    <div id="child"></div>
</div>

css:

img {
    -webkit-transform: translate3d(-37px, 29px, 0px);
}

#parent {
    position : relative;
    border   : 1px solid #000;
    overflow : hidden;
    height   : 100px;
}

#child{
    background : url('http://d.tile.stamen.com/watercolor/7/99/57.jpg') 0px 0px no-repeat fixed;
    width      : 100%;
    height     : 100px;
    position   : absolute;
    top        : 0px;
    left       : 0px;
}
Zach Saucier
  • 24,871
  • 12
  • 85
  • 147
  • At least in my browser, translate(-37px, 29px) works fine; it's just the translate3d that fails. Very strange ... – vals Jan 15 '14 at 07:49
  • @vals -- it probably has to do with `translate3d` kicking in hardware-accelerated transforms –  Jan 15 '14 at 08:16
  • Yes, it is. That explains why all the standard hacks fail, they are ways to enable GPU when it is disabled, not the oposite. I guess that the problem comes from the scroll being handled by the GPU, and that failing. Just as a source of documentation, see http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome – vals Jan 15 '14 at 17:10

2 Answers2

0

It is not a perfect solution, because it has side efects, but may be can give way to better workarounds

If you wrap your 3d transformed element in a overflow : hidden div, it seems to work:

<div class="container">
<img src="http://d.tile.stamen.com/watercolor/5/25/13.jpg" />
</div>
<div id="parent">
    <div id="child"></div>
</div>

.container {
    overflow: hidden;
}

fiddle

I have tried similar solutions to this one (for instance, setting opacity: 0.99; instead of overflow, but with no luck...

vals
  • 61,425
  • 11
  • 89
  • 138
0

Wrapping the translated object into div with opacity:0.99 works for me.

David Indra
  • 41
  • 3
  • It looks like this was intended to be in reply to [another answer](http://stackoverflow.com/a/21341112/2390644). Please do not create new answers as commentary. When you have enough reputation, you will be able to comment on other people's questions and answers. – William Price Dec 22 '14 at 00:21
  • @WilliamPrice I'd agree with that, though this does seem like a valid enough separate answer, given that that one mainly focuses on another method. – Pokechu22 Dec 22 '14 at 00:28
  • @Pokechu22 Yes, it could go either way. If intended as a separate answer, I think it needs a bit more explanation and/or code to stand on its own. – William Price Dec 22 '14 at 00:30