Navigation bar animation "flicker" with Safari 10

[ostaadt]

• This is a question about using the theme.
• I believe this to be a bug with the theme --- not Jekyll, GitHub Pages or one of the bundled plugins.
• This is a feature request.
• I have updated all gems with bundle update.
• I have tested locally with bundle exec jekyll build.

---

Environment informations

• Minimal Mistakes version: 3.4.8
• jekyll gem version: 3.2.1
• Operating system: macOS Sierra 10.12
• Safari: 10.0
• Chrome: 53.0.2785.143

---

Expected behavior

The navigation bar animation in minimal mistakes appears to be "flickering" when hovering over menu items using Safari 10. In addition to changing the font color when moving from menu item to menu item, the font weight appears to be toggled to a lighter weight and back to normal. I see the same behavior on the mmistakes Github pages, so I assume it's not a configuration issue with my mmistakes installation. The animation behaves as expected when opening the page with Chrome or Firefox.

Steps to reproduce the behavior

I have attached a .zip file with two screencasts (captured straight from https://mmistakes.github.io/minimal-mistakes/), one using Safari 10 and one using Chrome to illustrate the issue.

screencast.zip

[mmistakes]

As far as I can tell what's causing this in Safari is the animated lines that stretch below each link on :hover. Removing the transform: scaleX() declarations that makes the effect work causes the issue to disappear.

Will have to investigate why that property appears to play with anti-aliasing on the type which causes the flicker. Looks like some sort of rendering bug with the browser, so hopefully there's a way around it.

[mmistakes]

Possible fixes to try:

• Add -webkit-transform-style: preserve-3d; to the elements that are flickering.
• Add -webkit-backface-visibility: hidden; to the elements that are
  flickering.

ref: http://stackoverflow.com/questions/15751012/css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w

[mmistakes]

Update. The fix is replacing transform: scaleX(0) with transform: scaleX(0) translate3d(0, 0, 0);.

.greedy-nav .visibile-links a:before {
  ...
-  -webkit-transform: scaleX(0);
-  -ms-transform: scaleX(0);
-  transform: scaleX(0);
+  -webkit-transform: scaleX(0) translate3d(0, 0 , 0);
+  -ms-transform: scaleX(0) translate3d(0, 0 , 0);
+  transform: scaleX(0) translate3d(0, 0 , 0);
}

[ostaadt]

Yes, I can confirm this fixes the problem :-)
Thanks for this great theme!