Remove translate3d(0,0,0)

[jasny]

CSS3 2d/3d transforms have a serious side effect. They cause the object to act as a containing block for fixed positioned descendants. This basically means that you can't use fixed positioned items as a child of such an element.

For instance, look at navbar-fixed-top. You might want to show .navbar-nav outside of a .navbar, like is done in Jasny Bootstrap's .navmenu-offcanvas, which doesn't work with the transform (see jasny/bootstrap#278).

If a user want 3d acceleration to smooth out some transition effect, they should add translate3d themselves.

[mdo]

Until we hear more reports of problems here, I think we'll pass on reverting this change.

[juthilo]

Also related to translate3d(0,0,0): #14124

[jasny]

@juthilo Thanks for pointing it out.

I'm sure more strange behavior will arise soon, all related to translate3d. It has way to many side effects and the side effects differ from browser to browser.

[mdo]

It has way to many side effects and the side effects differ from browser to browser.

We've only seen about two or three things thus far. One of them is following the spec—your position: fixed; to position: relative; bug, which I definitely loathe along with you—and the other is likely a specific browser bug.

People come to your senses and remove it from the code.

Bootstrap is not reverting that (crappy) change. The plugin needs to work around this issue.

There are definite advantages to having it in there. Calling us nonsensical and insulting the change (and by extension the individual that helped add it) isn't called for given the above. I'm sorry it's causing you problems, but try not to get upset with us when frontend code doesn't go exactly to plan, or when browsers get things wrong, or when we make a mistake.

It's open source—be positive, find answers, ask for help, and share the knowledge. Negativity doesn't help anyone or anything.

<3

[jasny]

@mdo Agreed, I'll try to stay more positive. Your doing a great job for the web development community at large.

[maniqui]

+1 to remove this.

@mdo I've created this fiddle that shows an issue triggered by translate3d, affecting the rendering of a background image (with background-attachment:fixed) on an element with position:fixed.
The issue seems to affect Chrome/Chromium (in a few different ways, depending on the software version).

The fiddle is simple: I've a navbar statically positioned, that has a background image with background-attachment set to fixed. Then, on scroll, using the affix plugin, the navbar gets position:fixed (by adding the navbar-fixed-top class to it).

This is how it looks before scrolling:

---

Then, on Chromium 35 (Debian), after scrolling, when the navbar gets fixed, it looks glitchy:

---

On Chrome 35 (Debian), the image just looks all black and the navbar-brand text looks glitchy:

---

An on Chrome 37 (Debian/unstable), it looks "correct". The image looks fine (no glitches) but it doesn't get the background-attachment: fixed treatment: that is, when you scroll, the image will scroll too.

Sorry, Chrome 37 does the right thing: a background image with background-attachment: fixe on a position:fixed element shows fixed related to the viewport. (thanks @cvrebert )

[cvrebert]

(Technically, Linux is only unofficially supported by Bootstrap.)
@maniqui Have you filed a Chrome bug about background-attachment not working for you in Chrome 37?

[maniqui]

(Technically, Linux is only unofficially supported by Bootstrap.)

Didn't know. Thanks.

@maniqui Have you filed a Chrome bug about background-attachment not working for you in Chrome 37?

Not yet, but will do.
Please, could you (or anyone) confirm that the issues I reported don't happen in Chrome/Chromium on other OS (Windows, OS X)?
It's as simple as visiting the fiddle and scrolling down on the Result frame.

[cvrebert]

On Mac OS X, in Chrome 36, the background image's position is fixed with respect to the viewport. Mac OS X Firefox 31.0 behaves the same way.

[maniqui]

@cvrebert thanks. BTW, I've amended my comment, as Chromium 37 (unstable) is doing the right thing, which is what you mention: on the position: fixed element, its background image's is fixed (via background-attachment) with respect to the viewport.

[luketheobscure]

I just lost four hours of my life thanks to translate3d(0,0,0). Please remove this and save other engineers this pain.

[mdo]

@luketheobscure Which component specifically?

[luketheobscure]

@mdo .navbar-fixed-top

[hnrch02]

@mdo #14603 would be another reason to remove this.

[cvrebert]

Although FWIW, #14603 is really only a problem on iPads running outdated iOS versions.

[hnrch02]

@cvrebert That's not true, I can still reproduce the problem outlined in #14603 on iPad mini running iOS 8.

[cvrebert]

Oh, that's fun. 👿

[mdo]

Alright, let's nuke it in v3.2.1.

[bmwiedemann]

with http://zq1.de/bernhard/temp/firefoxbug I hit some interesting problem with translate3d in firefox on the icewm windowmanager