Баг transform: rotateY и адаптивной вёрстки
После наведения мышки на блок, всё работает адекватно, но в 30% случаев, появляется баг с "transition" (блок бьётся в конвульсиях во время поворота по оси Y, а затем "transition: rotateY 1.6s" прерывается где-то на 1s исполнения и резко идёт в исходное положение. Проблема с дивом под классом .uslugy.
Ещё на мобильных устройствах, если прокручивать вниз экран, то на местах швов (где блоки фонов сходятся), можно получить вот такую вот белую полоску, которая пропадает при дальнейшей прокрутке.
Ссылка на баг с отображением адаптивной вёрстки
Ссылка на сайт с описанными выше проблемами
HTML:
<!DOCTYPE html>
<html lang="ru">
<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>Блог</title>
<link rel="stylesheet" href="source/css/style.css">
<link rel="stylesheet" href="source/css/mobile.css">
</head>
<body>
<div class="wrapper">
<main>
<div class="container">
<header>
<nav>
<ul>
<li><a href="#">ГЛАВНАЯ</a></li>
<li><a href="#info_me">ОБО МНЕ</a></li>
<li><a href="#">БЛОГ</a></li>
</ul>
</nav>
</header>
<div class="content">
<div class="deb">
<h1>Привет, Это Мой Блог</h1>
<span>:before</span><p>веб-разработка</p><span>:after</span>
</div>
</div>
</div>
<div class="content_3" id="info_me">
<div class="fixer_2">
<div class="photo">
<div class="fixer_3">
<h2>dsadaddsadsad</h2>
</div>
</div>
<div class="info_me">
<h2>Обо мне</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, vel! Veniam ut qui adipisci cum consequatur nostrum. Ab obcaecati voluptatibus maiores sequi ea qui harum, mollitia enim eum placeat optio. Harum nihil possimus, unde blanditiis quisquam error ex quam sint. Autem repellat reiciendis aperiam quae consequuntur, deleniti repudiandae, omnis, eos harum sed assumenda veniam. Architecto consequuntur non hic rem corporis atque quisquam omnis porro itaque excepturi autem dolor cum odit earum, quo blanditiis accusantium ab in similique, dolores et. Expedita earum quibusdam tempore ipsam, repellat aut debitis nisi magnam et, illo perferendis, enim voluptates doloribus ducimus est eligendi velit animi!</p>
</div>
</div>
</div>
<div class="fixer">
<div class="content_2">
<div class="d">
<p>Жизнь</p>
<h2>Мои самые значимые увлечения</h2>
</div>
</div>
<div class="uvlech">
<div class="boocks">
<div class="info">
<h3>Книги — корабли мысли, странствующие по волнам времени и бережно несущие свой драгоценный груз от поколения к поколению.</h3>
</div>
</div>
<div class="walking">
<div class="info">
<h3>Если бы природа не была прекрасной, она не стоила бы того, чтобы быть познанной, жизнь не стоила бы того, чтобы быть прожитой. </h3>
</div>
</div>
<div class="gaming">
<div class="info">
<h3>Мы не потому перестаем играть, что постарели, — мы стареем, потому что перестаем играть.</h3>
</div>
</div>
<div class="code">
<div class="info">
<h3>Для меня долгое время было загадкой, как что-то очень дорогое и технологичное может быть столь бесполезным. И вскоре я осознал, что компьютер — это глупая машина, обладающая способностями выполнять невероятно умные вещи, тогда как программисты — это умные люди, у которых талант делать невероятные глупости. Короче, они нашли друг друга.</h3>
</div>
</div>
<div class="science">
<div class="info">
<h3>Наука — самое важное, самое прекрасное и нужное в жизни человека, она всегда была и будет высшим проявлением любви, только одною ею человек победит природу и себя.</h3>
</div>
</div>
</div>
<div class="b">
</div>
</div>
<div class="content_4">
<div class="prof">
<div class="service">
<p>Услуги</p>
<h1>Разработка сайтов, приложений<br>& Составление макетов</h1>
</div>
<div class="more">
<div class="uslugy">
<div class="u_container">
<div class="fixer_5">
<img src="source/img/pencil.svg" alt="pencil.svg">
</div>
<h3>Графический дизайн</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, assumenda.</p>
</div>
</div>
<div class="uslugy">
<div class="u_container">
<div class="fixer_5">
<img src="source/img/layers.svg" alt="layers.svg">
</div>
<h3>Веб-разработка</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, assumenda.</p>
</div>
</div>
<div class="uslugy">
<div class="u_container">
<div class="fixer_5">
<img src="source/img/3d.svg" alt="3d.svg">
</div>
<h3>Мобильная разработка</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione, assumenda.</p>
</div>
</div>
</div>
</div>
</div>
</main>
<footer>
</footer>
</div>
</body>
</html>
CSS Desktop:
@keyframes bum {
0% {
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
user-select: none;
font-size: 0;
font-family: Arial, sans-serif;
}
header {
width: 100%;
height: 80px;
padding: 0 20px 0 20px;
position: absolute;
}
main {
}
.container {
background-image: url(../img/mountain3.jpg);
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
.logo {
position: absolute;
max-width: 100px;
display: inline-block;
vertical-align: top;
height: 80px;
max-width: 100px;
text-align: center;
}
nav {
width: 100%;
text-align: center;
}
.contact {
max-width: 200px;
height: 80px;
display: inline-block;
vertical-align: top;
text-align: center;
}
.logo h1 {
height: 32px;
padding-top: 24px;
font-size: 30px;
font-family: sans-serif;
letter-spacing: 2px;
color: white;
}
.contact h2 {
height: 32px;
padding-top: 24px;
font-size: 30px;
font-family: sans-serif;
letter-spacing: 2px;
color: white;
}
nav li {
padding-top: 25px;
margin-right: 40px;
padding-bottom: 25px;
display: inline-block;
font-size: 27px;
}
nav li a{
color: white;
padding-bottom: 4px;
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size .3s;
}
nav a:hover {
background-size: 100% 2px;
}
nav li:last-child {
margin-right: 0;
}
.content {
height: 100vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
text-align: center;
}
.deb {
opacity: 0;
animation: bum 3s 0.5s;
animation-fill-mode: forwards;
}
.deb h1 {
font-size: 60px;
color: white;
text-transform: uppercase;
}
.deb p {
display: inline-block;
font-size: 40px;
color: white;
position: relative;
text-transform: uppercase;
}
.deb p:before {
width: 60px;
height: 2px;
content: " ";
display: block;
background-color: white;
position: absolute;
left: -70px;
top: calc(50% - 1px);
}
.deb p:after {
width: 60px;
height: 2px;
content: " ";
display: block;
background-color: white;
position: absolute;
right: -70px;
top: calc(50% - 1px);
}
.fixer {
position: relative;
height: auto;
background-color: white;
background-color: #001D38;
background-image: url(../img/17.jpg);
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
.content_2 {
width: 100%;
height: auto;
text-transform: uppercase;
text-align: center;
}
.content_2 p {
letter-spacing: 3px;
font-size: 20px;
padding-top: 100px;
color: white;
}
.content_2 h2 {
letter-spacing: 3px;
font-size: 30px;
padding-top: 10px;
color: white;
}
.d {
height: 500px;
background-image: url(../img/mountain4.jpg);
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
.b {
height: 660px;
}
.uvlech {
max-width: 1140px;
height: auto;
position: absolute;
left: calc(50% - 570px);
transform: translateY( -240px);
margin: auto;
padding: 0 20px 0 20px;
overflow: hidden;
}
.uvlech > div:hover .info {
opacity: 1;
transform: translateX(0%);
background-color: rgb(15, 39, 97, 0.8);
}
.uvlech > div{
overflow: hidden;
}
.info {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
color: white;
font-size: 16px;
overflow: hidden;
text-align: center;
transform: translateX(-50%);
transition: transform 0.8s, background 0.8s, opacity 0.8s;
background-color: rgb(15, 39, 65, 0);
}
.info h3 {
width: 80%;
}
.boocks {
width: 480px;
margin-right: 40px;
margin-bottom: 20px;
height: 380px;
display: inline-block;
vertical-align: top;
background-image: url(../img/books.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.walking {
width: 580px;
height: 380px;
margin-bottom: 20px;
display: inline-block;
vertical-align: top;
background-image: url(../img/mountain.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.gaming {
width: 340px;
height: 400px;
margin-right: 40px;
display: inline-block;
vertical-align: top;
background-image: url(../img/gaming.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.code {
width: 340px;
height: 400px;
margin-right: 40px;
display: inline-block;
vertical-align: top;
background-image: url(../img/code.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.science {
width: 340px;
height: 400px;
display: inline-block;
vertical-align: top;
background-image: url(../img/science.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.content_3 {
width: 100%;
height: auto;
margin: auto;
background-image: url(../img/10.jpg);
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
position: relative;
overflow: hidden;
}
.fixer_2 {
max-width: 1140px;
height: 100%;
margin: auto;
padding: 0 20px 0 20px;
}
.photo {
max-width: 400px;
height: 400px;
border-radius: 5px;
margin-top: 100px;
margin-bottom: 100px;
display: inline-block;
vertical-align: top;
background-image: url(../img/me.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.fixer_3 {
max-width: 400px;
height: 40px;
opacity: 0;
font-size: 30px;
}
.info_me {
max-width: 600px;
height: auto;
margin-left: 60px;
margin-top: 100px;
margin-bottom: 100px;
display: inline-block;
vertical-align: top;
}
.info_me h2 {
font-size: 50px;
color: white;
padding-top: 27px;
text-align: center;
}
.info_me p {
font-size: 21px;
color: white;
}
.content_4 {
width: 100%;
height: auto;
background-image: url(../img/2.jpg);
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
.prof {
max-width: 1140px;
padding: 0px 20px 0 20px;
margin: auto;
}
.service {
width: 100%;
height: auto;
padding: 100px 0px 0px 0px;
text-align: center;
color: white;
text-transform: uppercase;
}
.service h1 {
letter-spacing: 3px;
font-size: 30px;
padding-top: 10px;
}
.service p {
letter-spacing: 3px;
font-size: 20px;
}
.more {
width: 100%;
padding-top: 60px;
padding-bottom: 100px;
}
.uslugy {
max-width: 340px;
height: 340px;
display: inline-block;
vertical-align: top;
margin-right: 40px;
background-color: rgb(15, 39, 65, 0.5);
border: 2px solid rgb(215, 193, 180, 0.2);
transition: border 1.6s, transform 1.6s;
cursor: pointer;
}
.uslugy:hover {
border: 2px solid rgb(0, 127, 255, 0.8);
transform: rotateY(360deg);
}
.uslugy:last-child {
margin-right: 0;
}
.u_container {
width: 100%;
height: 100%;
text-align: center;
}
.u_container img {
width: 60px;
height: 60px;
display: block;
}
.u_container h3 {
width: 100%;
color: white;
display: block;
font-size: 20px;
padding-top: 20px;
text-transform: uppercase;
}
.u_container p {
width: 80%;
display: block;
margin: auto;
padding-top: 18px;
font-size: 20px;
color: white;
}
.fixer_5 {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding-top: 72px;
}
CSS Mobile:
@media screen and (max-width: 1239px) {
.uvlech {
position: static;
margin: auto;
}
.fixer {
height: 2480px;
}
.b {
height: 0;
}
.boocks, .walking, .gaming, .code, .science {
width: 98%;
margin: 0 1% 0 1%;
display: block;
margin: auto;
margin-bottom: 40px;
}
.uslugy {
display: block;
margin: auto;
margin-bottom: 40px;
}
.uslugy:last-child {
margin: auto;
}
.photo {
display: block;
margin: auto;
margin-top: 100px;
}
.info_me {
max-width: 400px;
display: block;
margin: auto;
padding: 0 20px 0 20px;
margin-bottom: 100px;
text-align: justify;
}
.fixer {
}
}
@media screen and (max-width: 520px) {
nav li {
font-size: 20px;
}
.deb h1 {
font-size: 40px;
padding: 0 20px 0 20px;
}
.deb p {
font-size: 30px;
}
.deb p:before {
width: 40px;
left: -44px;
}
.deb p:after {
width: 40px;
right: -44px;
}
}