Content jumps up and down when hovering over social links in firefox.

[seiferteric]

When I hover over either my github or email icon the entire content jumps up, then when I move the mouse and hover over it again, it jumps back down to the center making clicking on these links impossible.

This is only seen in Firefox, not in Chrome.

[laztname]

I have same problem, image in homepage is actually in under of navigator, but when hover in social link, it's will buggy and the gap of image and navigation is come

[seiferteric]

Also the content is vertically centered in chrome, but is on top in firefox (until it starts to jump around).

[seiferteric]

As a workaround I modified style.less, this seems to stop it jumping around, but then I miss the hover animations.

diff --git a/static/less/style.less b/static/less/style.less
index 6b52bc3..fae7b05 100644
--- a/static/less/style.less
+++ b/static/less/style.less
@@ -482,9 +482,6 @@ a:hover {
   text-decoration: none;
 }
 
-a:hover:before, a:hover:after {
-  width: 50%;
-}
 
 .private {
   display: none;

[laztname]

thanks for the solution, but it's make me miss the hover animation

[nurmukhametov]

My workaround is setting flex of content to 0. I don't know exactly what this option does, but the hover animation is still working.

diff --git a/static/less/style.less b/static/less/style.less
index 074e128..ee9420c 100644
--- a/static/less/style.less
+++ b/static/less/style.less
@@ -293,7 +293,7 @@ img {
 }
 
 .content {
-  flex: 1;
+  flex: 0;
   margin-top: 1.6rem;
   margin-bottom: 3.2rem;
   article {

[jfairoze]

My workaround is setting flex of content to 0. I don't know exactly what this option does, but the hover animation is still working.

diff --git a/static/less/style.less b/static/less/style.less
index 074e128..ee9420c 100644
--- a/static/less/style.less
+++ b/static/less/style.less
@@ -293,7 +293,7 @@ img {
 }
 
 .content {
-  flex: 1;
+  flex: 0;
   margin-top: 1.6rem;
   margin-bottom: 3.2rem;
   article {

Did you get the "about" class to stay centered?

[stumatt]

Hello, is there a fix for this problem that allows to hold the hover animation?

[hdevilbiss]

To fix the FireFox jumping, change the flex property of the .content flex item.

nurmukhametov's reply in this thread

>  .content {
> -  flex: 1;
> +  flex: 0;
>    ...
>

I tested iterations of flex defined by Mozilla developer documents. Changing from 1 to 0 sets flex-grow to 0.

coder-portfolio_testing_content_flex_item.xlsx

❌These .content > flex settings cause jumps:

• flex: 1
• flex: auto
• flex: 1 0
• flex: 1 1

✅These .content > flex settings do not cause jumps:

• flex: 0
• flex: none
• flex: initial
• flex: 0 0
• flex: 0 1
• flex: 0 0 0
• flex: 0 1 0
• flex: 0 0 1
• flex: 1 0 0
• flex: 1 0 1
• flex: 1 1 0
• flex: 1 1 1
• flex: inherit
  Inheritance

The selector is the .content flex item; its container is <main class="wrapper"> element, which has these rules:

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

[kouks]

The issue is with min-height: 100vh on the .wrapper element. Setting html and body height to 100% fixes this issue for me.