Strange behavior when hovering/clicking an element - html

Question

I get a really strange behavior on a very simple html landing page.
The page is the following: http://fw2019.gosrl.webfactional.com/
If you try to click on any link (FB icon, Instagram icon, years of the previous edition) the yellow shape on the background suddenly move to the right.
The page is pure html + css, with no javascript attached.
I've tried to:
- deactivate any transition/animation when hovering Social Icons
- check if I get the same behavior at a lower resolution -> YES
html,
body {
margin: 0;
height: 100%;
font-family: "Open Sans", arial, sans-serif;
}
.main-image {}
.main-image img {
margin: 30px auto;
display: block;
max-width: 600px;
width: 100%;
}
.content-wrapper,
.fake-content-wrapper {
position: absolute;
text-align: center;
width: 1636px;
height: 562px;
background: url(/wp-content/asset/grid-svg-4-01.svg);
overflow: hidden;
margin: 0 auto;
z-index: 99;
}
.fake-content-wrapper {
position: absolute;
overflow: visible;
left: 50%;
top: -130px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background: transparent;
z-index: 56;
}
.content-wrapper p {
text-align: center;
margin-bottom: 5px;
margin-top: 0;
}
.content-wrapper h1 {
text-align: center;
margin-top: 0;
}
.main-container {
display: table;
width: 100%;
height: 100%;
}
.main-content {
vertical-align: middle;
position: relative;
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.titolo {
display: inline-block;
width: 772px;
height: 208px;
position: absolute;
top: 176px;
left: 345px;
background: #fff;
margin: 0;
padding: 32px 25px;
box-sizing: border-box;
margin-left: 1px;
margin-top: 1px;
font-family: titling-gothic-fb-wide, sans-serif;
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 64px;
line-height: 70px;
z-index: 999;
text-align: left;
}
.logo-container {
background: #000;
width: 171px;
height: 138px;
position: absolute;
left: 1120px;
top: 212px;
padding: 28px;
box-sizing: border-box !important;
z-index: 999;
}
.logo-container img {
width: 100%;
}
.sponsor-container {
position: absolute;
right: 260px;
top: 37px;
background: #fff;
width: 428px;
height: 68px;
padding: 8px;
box-sizing: border-box;
text-align: center;
z-index: 999;
}
.date-container {
box-sizing: border-box;
background: #fff;
position: absolute;
width: 944px;
left: 346px;
top: 422px;
text-align: center;
z-index: 999;
font-family: "Space Mono", monospace;
padding: 6px 10px;
}
.date-container>div {
display: inline-block;
text-transform: uppercase;
padding: 0;
margin-right: 10px;
font-size: 56px;
line-height: 100%;
}
.date-container .light {
font-weight: 400;
}
.date-container .bold {
font-weight: 700;
}
.blue-box {
box-sizing: border-box;
width: 256px;
height: 0;
background-color: rgba(0, 157, 255, 1);
position: absolute;
background-position: -2px -2px;
right: 2px;
bottom: 2px;
height: 138px;
z-index: 0 !important;
animation-name: enlarge;
animation-duration: 5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-delay: 1s;
animation-timing-function: linear;
}
#keyframes enlarge {
from {
height: 0;
}
to {
height: 560px;
}
}
#keyframes slide {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-1000px);
}
}
.red-circle {
position: absolute;
left: 40px;
top: 2px;
height: 558px;
width: 562px;
display: inline-block;
box-sizing: border-box;
background-color: #ff003f;
background-position: 130px 136px;
border: 2px solid #000;
border-radius: 1000000px;
z-index: 9;
}
.skate-park {
/* width: 1636px;
height: 1200px; */
position: absolute;
display: block;
background: url(http://fw2019.gosrl.webfactional.com/wp-content/uploads/2019/07/skate-bg-2.png);
/* left: -47px;)
top: 102px; */
background-size: cover;
top: -45px;
left: 300px;
height: 200vh;
width: 100vw;
}
.fake-content-wrapper#circle {
top: 203px;
}
.fake-content-wrapper#rect {
top: 333px;
}
.content-wrapper#skate {
overflow: hidden;
background: none;
position: fixed;
left: -10%;
height: 200vh;
width: 200vw;
position: fixed;
}
.content-wrapper#skate .skate-park {
position: relative;
/* top: -140px; */
}
/* ANIMAZIONE */
/* .blue-box {
animation-name: bluebox;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes bluebox {
0% {transform: translate(0,0);}
6.39% {transform: translate(0,-210px);}
43.61% {transform: translate(-1376px,-210px);}
55.58% {transform: translate(-1376px,210px);}
92.8% {transform: translate(0px,210px);}
100% {transform: translate(0px,0);}
} */
.previous h3,
.previous a {
display: inline-block;
margin-right: 10px;
}
.previous a:last-child {
margin-right: 0;
}
.previous h3 {
font-family: titling-gothic-fb-narrow, sans-serif;
margin-block-start: 0px;
margin-block-end: 0px;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
margin-right: 10px;
font-weight: 500;
}
.previous a {
font-family: "Space Mono", monospace;
color: #000;
text-decoration: none;
margin-right: 5px;
}
.previous a:hover {
text-decoration: underline;
}
.content-wrapper#footer {
overflow: visible;
background: none;
}
.previous,
.social {
position: absolute;
bottom: -40px;
top: auto;
right: 0;
padding-top: 10px;
padding-bottom: 10px;
}
.social {
bottom: -50px;
left: 0;
right: auto;
}
.social img {
height: 30px;
}
.social a {
margin-right: 5px;
}
.social a img {
transition: all 0.5s ease;
}
/* .social a:hover img {
transform: rotateY(360deg);
} */
#media screen and (max-width: 1919px) and (min-width: 1366px) {
.content-wrapper,
.fake-content-wrapper {
width: 1292px;
}
.titolo,
.date-container {
left: 173px;
}
.date-container {
width: 772px;
left: 174px;
}
.logo-container {
left: 948px;
}
.fake-content-wrapper#circle {
top: 196px;
}
.fake-content-wrapper#rect {
top: 326px;
}
/* .skate-park {
left: -360px;
} */
.date-container>div {
font-size: 46px;
padding-top: 5px;
padding-bottom: 5px;
}
.blue-box {
bottom: -200px;
top: auto;
width: 170px;
}
#keyframes enlarge {
from {
height: 0;
}
to {
height: 760px;
}
}
}
#media screen and (max-width: 1365px) and (min-width: 1024px) {
.content-wrapper {
width: 862px;
}
.sponsor-container {
right: 88px;
}
.titolo,
.date-container {
left: 1px;
width: 686px;
}
.date-container {
left: 2px;
}
.date-container>div {
font-size: 40px;
left: 2px;
padding-top: 8px;
padding-bottom: 8px;
}
.blue-box {
bottom: 2px;
top: auto;
width: 170px;
}
.logo-container {
left: 689px;
}
.content-wrapper#skate {
left: -20%;
width: 200%;
}
}
#media screen and (max-width: 1023px) and (min-width: 768px) {
.content-wrapper {
width: 604px;
}
.sponsor-container {
right: 2px;
}
.titolo {
left: 1px;
font-size: 60px;
width: 600px;
}
.date-container {
left: 2px;
width: 600px;
}
.date-container>div {
font-size: 35px;
margin-right: 4px;
padding-top: 11px;
padding-bottom: 11px;
}
.logo-container {
left: 2px;
top: 37px;
}
.blue-box {
width: 170px;
}
.content-wrapper#skate {
left: -30%;
}
}
#media screen and (max-width: 767px) and (min-width: 375px) {
.content-wrapper {
width: 346px;
}
.titolo {
left: 1px;
font-size: 41px;
line-height: 43px;
height: 138px;
width: 342px;
padding-top: 8px;
}
.logo-container {
top: 37px;
left: 2px;
}
.date-container {
width: 342px;
left: 2px;
top: 352px;
padding: 4.5px;
}
.date-container>div {
font-size: 18px;
line-height: 18px;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
}
.sponsor-container {
left: 2px;
width: 342px;
bottom: 37px;
top: auto;
}
.sponsor-container img {
width: 100%;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
}
.previous h3 {
display: block;
text-align: right;
}
.previous {
bottom: -60px;
}
.blue-box {
width: 170px;
}
.content-wrapper#skate {
left: -50%;
}
.skate-park {
top: -100px;
left: 300px;
width: 150vw;
}
.titolo {
font-size: 32px;
padding-top: 5px;
}
}
#media screen and (max-width: 374px) {
.content-wrapper {
width: 259.5px;
}
.logo-container {
top: 37px;
left: 2px;
}
.titolo {
left: 1px;
font-size: 28px;
line-height: 32px;
width: 256px;
height: 173px;
}
.date-container {
left: 2px;
width: 256px;
top: 387px;
height: 68px;
}
.date-container>div {
font-size: 14px;
margin: 0;
padding-top: 21px;
}
.sponsor-container {
width: 256px;
left: 2px;
bottom: 2px;
top: auto;
}
.sponsor-container img {
width: 100%;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
padding-top: 8px;
}
.previous h3 {
display: block;
text-align: right;
}
.previous {
bottom: -60px;
}
.blue-box {
width: 84px;
}
.content-wrapper#skate {
left: -50%;
width: 400vw;
}
.previous {
display: block;
width: 100%;
clear: both;
text-align: right;
bottom: -100px;
}
.social {
text-align: left;
}
.skate-park {
left: 200px;
}
.main-content {
align-items: baseline;
}
body {
padding-top: 25px;
padding-bottom: 25px;
}
.content-wrapper#skate {
top: 0;
}
.content-wrapper#skate {
top: -400px;
}
}
/* CELL ORIZZONTALI */
#media screen and (max-height: 500px) and (orientation: landscape) {
.main-content {
align-items: baseline;
}
body {
padding-top: 25px;
padding-bottom: 25px;
}
.content-wrapper#skate {
top: 0;
}
}
/* RETINA */
#media screen and (-webkit-min-device-pixel-ratio: 2),
(min-width: 1921px) {
.skate-park {
left: 13.5%;
top: -10%;
}
}
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>Festiwall 2019 | 9 - 15 Settembre 2019 | Ragusa</title>
<link rel="stylesheet" href="https://use.typekit.net/qse6gsn.css">
<link href="https://fonts.googleapis.com/css?family=Space+Mono:400,700&display=swap" rel="stylesheet">
</head>
<body>
<div class="main-container">
<div class="main-content">
<div class="content-wrapper" id="circle">
<div class="red-circle"></div>
</div>
<div class="content-wrapper" id="skate">
<div class="skate-park"></div>
</div>
<div class="content-wrapper" id="rect">
<div class="blue-box"></div>
</div>
<div class="content-wrapper">
<h2 class="titolo">Public Art<br>Festival</h2>
<div class="logo-container">
<img src="/wp-content/uploads/2019/07/festiwall-2019-logo.png" alt="Festiwall 2019 logo">
</div>
<div class="sponsor-container">
<img src="/wp-content/uploads/2019/07/festiwall-2019-sponsor.png" alt="Festiwall 2019 Sponsor">
</div>
<div class="date-container">
<div class="light">09/15</div>
<div class="bold">September</div>
<div class="light">2019</div>
<div class="bold">Ragusa</div>
</div>
</div>
<div class="content-wrapper" id="footer">
<div class="social">
<img src="/wp-content/uploads/2019/07/fw2019-icons-_0001_fb.png" alt="Facebook">
<img src="/wp-content/uploads/2019/07/fw2019-icons-_0000_inst.png" alt="Instagram">
</div>
<div class="previous">
<h3>Edizioni precedenti</h3>
2015 / 2016 / 2017 / <a href="http://www.festiwall.it/2018"
title="Festiwall 2016">2018</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Thank you for those who are willing to give support :)
Antonio