Repaint fixes

[ItsJonQ]

Hey hey,
Applied translateZ / translate3d to fixed elements to prevent browser repaint when scrolling.

These changes were originally part of a Bootstrap reset I made called "Lil' B"
http://itsjonq.github.io/lil-b/

Also added a new mixin under vendor-prefixes.less - .translateZ(@z). This targets translateZ directly.
I initially wanted to use .translate3d to target the "Z" axis for the repaint fixes.. but I believe translateZ has IE9 whereas translate3d doesn't:

http://caniuse.com/transforms3d

Hope this helps!

For you guys:
https://pbs.twimg.com/media/Bl3XWPkIUAAm66k.jpg:large

[cvrebert]

Not sure whether we should really use a mixin here. We've switched to Autoprefixer for handling vendor prefixing, which made all of our vendor prefix mixins deprecated (& subject to deletion in v4), so it seems weird to add a new one that'll be deprecated right from the get-go.

[NickColley]

will-change might be be of relevance to this http://www.aerotwist.com/blog/bye-bye-layer-hacks/
Putting it here incase it helps. 👍

[ItsJonQ]

@cvrebert Oh, I didn't know about that change in v4. If you're down for it, I can make the repaint-fix changes without the new mixin if you think that'll help for v3.

@NickColley That's awesome! I've only started following Paul's stuff recently - must have missed that one. Very excited to see the future of will-change.

[cvrebert]

@ItsJonQ It's @mdo's call; just wanted to make sure to raise the issue.

[ItsJonQ]

Heya,

Just made an update and push that removed the .translateZ mixin, and added .translate3d in it's place for the navbars and .affix.

[NickColley]

As cvrebert mentioned Bootstrap uses autoprefixer so you could just have the pure transform property, yay less code.

Might be It'd be nice to do something like:

.will-change {
  transform: translate3d(0, 0, 0);
}

.affix {
  .will-change();
}

Frees you up to changing the implementation incase it changes in the future.

[XhmikosR]

Also this needs to be rebased against the latest master @ItsJonQ.

[cvrebert]

@XhmikosR It's probably just the *.min.* & *.map files. I'm happy to do the rebase once @mdo finishes reviewing this.

[XhmikosR]

OK, cool. It's also the rtl files that have been removed.

[ItsJonQ]

Thanks for the heads up! The changes were made a while ago, and I haven't updated anything as I was waiting to hear back.

I can make whatever updates/changes needed - just lemme know :)

[XhmikosR]

@ItsJonQ: you will need to rebase against the latest upstream master branch.

[NickColley]

@ItsJonQ also you'll need to remove the vendor prefixes too as I mentioned above 👍

[ItsJonQ]

Hey guys,
I'm not super familiar with rebasing (sorry!). I followed the instructions from CONTRIBUTING.md the best that I could. It took me about an hour of tinkering, but I was able to push.

I hope everything went through okay. If you guys have some free time, I'd really appreciate it if you guys can double check to make sure that I didn't break anything.

Thanks!

[XhmikosR]

Nah, it's still wrong @ItsJonQ. You shouldn't have changes in non existent files like the RTL files or the merge patches.

https://help.github.com/articles/interactive-rebase

So basically git rebase -i upstream/master assuming you have the upstream repo like that.

[mdo]

Alternatively, if you're like me @ItsJonQ, you can open a new PR :). Let's figure out any final feedback here first though. I'll dive in...

[XhmikosR]

Or someone from us can cherry pick the changes if needed, as long as they are reviewed :)

[mdo]

As far as I can tell, this all looks great, aside from the unrelated files @XhmikosR mentioned and the un-prefixed, non-mixin version of transform: translate3d(0, 0, 0); mentioned by @NickColley.

Make those changes and open a new PR (preferably with a single commit), or try the rebase and squash thing again if you like. Your call :).

[ItsJonQ]

@mdo @XhmikosR @NickColley

Thanks guys for being so patient + understanding :). This is the first time I'm contributing to a public project - I've learned a ton so far!

@mdo I think it would be easiest to open a new pull request, haha.

Thanks again. You guys rock \m/

[mdo]

@ItsJonQ Awesome! Go ahead and close this and open a new one when you're all set. Thanks so much—and for it being your first, you're doing great <3.

[cvrebert]

Successor: #13649.