New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Navigation bar animation "flicker" with Safari 10 #568

Closed
ostaadt opened this Issue Oct 5, 2016 · 4 comments

Comments

Projects
None yet
2 participants
@ostaadt

ostaadt commented Oct 5, 2016

  • 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 mmistakes added this to the 4.0 milestone Oct 7, 2016

@mmistakes mmistakes added the Type: Bug label Oct 7, 2016

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Oct 7, 2016

Owner

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.

Owner

mmistakes commented Oct 7, 2016

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

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Oct 7, 2016

Owner

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

Owner

mmistakes commented Oct 7, 2016

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 mmistakes self-assigned this Oct 7, 2016

@mmistakes

This comment has been minimized.

Show comment
Hide comment
@mmistakes

mmistakes Oct 8, 2016

Owner

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);
}
Owner

mmistakes commented Oct 8, 2016

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);
}

mmistakes added a commit that referenced this issue Oct 9, 2016

@ostaadt

This comment has been minimized.

Show comment
Hide comment
@ostaadt

ostaadt Oct 9, 2016

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

ostaadt commented Oct 9, 2016

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

@ostaadt ostaadt closed this Oct 9, 2016

@mmistakes mmistakes referenced this issue Oct 10, 2016

Closed

On hover sidebar jumps/flickers #583

1 of 1 task complete

TheCodedSelf pushed a commit to TheCodedSelf/thecodedself.github.io that referenced this issue Dec 7, 2016

jluccisano added a commit to jluccisano/jluccisano.github.io that referenced this issue May 6, 2017

antonizoon pushed a commit to antonizoon/antonizoon.github.io that referenced this issue Jul 27, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment