How to fix a CSS animation error

Asked

Viewed 46 times

1

I’m developing a website and created some pits.

The problem is that when I roll the page up and it’s only half the box box appearing, if I hover over the first and last element, the animation Buga and the page rolls up all by itself.

  1. Only happens in Chrome;

  2. It only happens when the page has half the icons appearing:

print do erro

Here is the code (replicated Codepen):

 .box{
    position: relative;
    display: block;
    max-width: 310px;
    min-width: 280px;

    height: 320px;
    margin: 20px;
    overflow: hidden;
    border-radius: 10px;
    border: none;
    background: #333;
    color: white;
    float: left;
    overflow: hidden;
    height: 320px;
}

.box .icon{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: 0.3s;
z-index: 2;
background: #3498db;
}

 .box:hover .icon{
    top: 20px;
    left: calc(50% - 40px);
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

 .box .icon i{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 80px;
}

 .box:hover .icon i{
    font-size: 40px;
}

 .box .box_back{
    position: absolute;
    top: 100%;
    height: 320px;
    text-align: center;
    transition: 1s;
    font-family: quicksand;
    font-size: 18px;
    opacity: 0,01;
    border: 0;
    z-index: 1;
    display: block;
    width: 100%;
}

 .box:hover .box_back{
    top: 0;
    visibility: visible;
    height: 100%;
    padding-top: 75px;
    opacity: 1;
}

 .box:nth-child(2) .box_back{
    background: #1abc9c;
}
 .box:nth-child(3) .box_back{
    background: #2ecc71;
}
 .box:nth-child(4) .box_back{
    background: #3498db;
}
 .box:nth-child(5) .box_back{
    background: #f1c40f;
}
 .box:nth-child(6) .box_back{
    background: #e67e22;
}
 .box:nth-child(1) .box_back{
    background: #e74c3c;
}

 .box:nth-child(2) .icon{
    background: #16a085;
}
 .box:nth-child(3) .icon{
    background: #27ae60;
}
 .box:nth-child(4) .icon{
    background: #2980b9;
}
 .box:nth-child(5) .icon{
    background: #f39c12;
}
 .box:nth-child(6) .icon{
    background: #d35400;
}
 .box:nth-child(1) .icon{
    background: #c0392b;
}

section{
    min-height: 100vh;
    width: 100%;
    background: linear-gradient(to top, #34495e, #2c3e50);
    font-family: open_sans, Helvetica, arial, sans-serif;
}
.content::before, .content::after{
  content: "";
  display: table;
}

.content::after{
  clear: both;
}

.content{
  max-width: 990px;
  margin: 0 auto;
}
<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Box bugado</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">

</head>

<body>
  <section class="servicos">
    <div class="content">
    <div class="box">
      <div class="icon">
        <i class="fas fa-desktop"></i>
      </div>
      <div class="box_back">
        <h1>Titulo</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia animi vitae eveniet expedita esse natus saepe quasi nulla corporis? Adipisci vitae quaerat repellat maiores corrupti perferendis eos dignissimos architecto nostrum.</p>
      </div>
    </div>

    <div class="box">
      <div class="icon">
        <i class="fas fa-mobile-alt"></i>
      </div>
      <div class="box_back">
        <h1>Titulo</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia animi vitae eveniet expedita esse natus saepe quasi nulla corporis? Adipisci vitae quaerat repellat maiores corrupti perferendis eos dignissimos architecto nostrum.</p>
      </div>
    </div>

    <div class="box">
      <div class="icon">
        <i class="fas fa-code"></i>
      </div>
      <div class="box_back">
        <h1>Titulo</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia animi vitae eveniet expedita esse natus saepe quasi nulla corporis? Adipisci vitae quaerat repellat maiores corrupti perferendis eos dignissimos architecto nostrum.</p>
      </div>
    </div>

    <div class="box">
      <div class="icon">
        <i class="fab fa-connectdevelop"></i>
      </div>
      <div class="box_back">
        <h1>Titulo</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia animi vitae eveniet expedita esse natus saepe quasi nulla corporis? Adipisci vitae quaerat repellat maiores corrupti perferendis eos dignissimos architecto nostrum.</p>
      </div>
    </div>

    <div class="box">
      <div class="icon">
        <i class="fas fa-search"></i>
      </div>
      <div class="box_back">
        <h1>Titulo</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia animi vitae eveniet expedita esse natus saepe quasi nulla corporis? Adipisci vitae quaerat repellat maiores corrupti perferendis eos dignissimos architecto nostrum.</p>
      </div>
    </div>

    <div class="box">
      <div class="icon">
        <i class="fas fa-lock"></i>
      </div>
      <div class="box_back">
        <h1>Titulo</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia animi vitae eveniet expedita esse natus saepe quasi nulla corporis? Adipisci vitae quaerat repellat maiores corrupti perferendis eos dignissimos architecto nostrum.</p>
      </div>
      </div>
  </section>
</body>

</html>

css css3 google-chrome
  • 3

    Changing font-size no :Hover to Scale the problem some. Test: https://codepen.io/anon/pen/REXxJZ

  • vlw function perfectly

1 answer

2


By decreasing the :hover on this line, is causing the bug:

.box:hover .icon i{
  font-size: 40px;
}

You can trade for scale worthwhile .5 (half the original size of 80px):

.box:hover .icon i{
   /* font-size: 40px; */
   transform: scale(.5);
}

Now, you could use flexbox in class .icon to center the icon instead of doing this with transform:

.box .icon{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   transition: 0.3s;
   z-index: 2;
   background: #3498db;

   /* propriedades adicionadas */
   display: flex;
   align-items: center; /* centraliza no eixo Y */
   justify-content: center; /* centraliza no eixo X */
}

Then you don’t need the properties top, left and transform in the style below:

 .box .icon i{
    position: absolute;
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
    font-size: 80px;
}

Code:

.box{
    position: relative;
    display: block;
    max-width: 310px;
    min-width: 280px;

    height: 320px;
    margin: 20px;
    overflow: hidden;
    border-radius: 10px;
    border: none;
    background: #333;
    color: white;
    float: left;
    overflow: hidden;
    height: 320px;
}

.box .icon{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   transition: 0.3s;
   z-index: 2;
   background: #3498db;
   /* propriedades adicionadas */
   display: flex;
   align-items: center;
   justify-content: center;
}

 .box:hover .icon{
    top: 20px;
    left: calc(50% - 40px);
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

 .box .icon i{
    position: absolute;
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
    font-size: 80px;
}

.box:hover .icon i{
   /* font-size: 40px; */
   transform: scale(.5);
}

 .box .box_back{
    position: absolute;
    top: 100%;
    height: 320px;
    text-align: center;
    transition: 1s;
    font-family: quicksand;
    font-size: 18px;
    opacity: 0.01;
    border: 0;
    z-index: 1;
    display: block;
    width: 100%;
}

 .box:hover .box_back{
    top: 0;
    visibility: visible;
    height: 100%;
    padding-top: 75px;
    opacity: 1;
}

 .box:nth-child(2) .box_back{
    background: #1abc9c;
}
 .box:nth-child(3) .box_back{
    background: #2ecc71;
}
 .box:nth-child(4) .box_back{
    background: #3498db;
}
 .box:nth-child(5) .box_back{
    background: #f1c40f;
}
 .box:nth-child(6) .box_back{
    background: #e67e22;
}
 .box:nth-child(1) .box_back{
    background: #e74c3c;
}

 .box:nth-child(2) .icon{
    background: #16a085;
}
 .box:nth-child(3) .icon{
    background: #27ae60;
}
 .box:nth-child(4) .icon{
    background: #2980b9;
}
 .box:nth-child(5) .icon{
    background: #f39c12;
}
 .box:nth-child(6) .icon{
    background: #d35400;
}
 .box:nth-child(1) .icon{
    background: #c0392b;
}

section{
    min-height: 100vh;
    width: 100%;
    background: linear-gradient(to top, #34495e, #2c3e50);
    font-family: open_sans, Helvetica, arial, sans-serif;
}
.content::before, .content::after{
  content: "";
  display: table;
}

.content::after{
  clear: both;
}

.content{
  max-width: 990px;
  margin: 0 auto;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">

  <section class="servicos">
    <div class="content">
    <div class="box">
      <div class="icon">
        <i class="fas fa-desktop"></i>
      </div>
      <div class="box_back">
        <h1>Titulo</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia animi vitae eveniet expedita esse natus saepe quasi nulla corporis? Adipisci vitae quaerat repellat maiores corrupti perferendis eos dignissimos architecto nostrum.</p>
      </div>
    </div>

    <div class="box">
      <div class="icon">
        <i class="fas fa-mobile-alt"></i>
      </div>
      <div class="box_back">
        <h1>Titulo</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia animi vitae eveniet expedita esse natus saepe quasi nulla corporis? Adipisci vitae quaerat repellat maiores corrupti perferendis eos dignissimos architecto nostrum.</p>
      </div>
    </div>

    <div class="box">
      <div class="icon">
        <i class="fas fa-code"></i>
      </div>
      <div class="box_back">
        <h1>Titulo</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia animi vitae eveniet expedita esse natus saepe quasi nulla corporis? Adipisci vitae quaerat repellat maiores corrupti perferendis eos dignissimos architecto nostrum.</p>
      </div>
    </div>

    <div class="box">
      <div class="icon">
        <i class="fab fa-connectdevelop"></i>
      </div>
      <div class="box_back">
        <h1>Titulo</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia animi vitae eveniet expedita esse natus saepe quasi nulla corporis? Adipisci vitae quaerat repellat maiores corrupti perferendis eos dignissimos architecto nostrum.</p>
      </div>
    </div>

    <div class="box">
      <div class="icon">
        <i class="fas fa-search"></i>
      </div>
      <div class="box_back">
        <h1>Titulo</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia animi vitae eveniet expedita esse natus saepe quasi nulla corporis? Adipisci vitae quaerat repellat maiores corrupti perferendis eos dignissimos architecto nostrum.</p>
      </div>
    </div>

    <div class="box">
      <div class="icon">
        <i class="fas fa-lock"></i>
      </div>
      <div class="box_back">
        <h1>Titulo</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Mollitia animi vitae eveniet expedita esse natus saepe quasi nulla corporis? Adipisci vitae quaerat repellat maiores corrupti perferendis eos dignissimos architecto nostrum.</p>
      </div>
      </div>
  </section>

Browser other questions tagged css css3 google-chrome

You are not signed in. Login or sign up in order to post.