My website, , has a footer that is clickable in Chrome but not in Safari. When users scroll to the footer in Safari, the screen jumps back to the top, making it inaccessible. Can anyone help me identify the issue?
Below is the CSS code for my React project:
@font-face {
font-family: ubuntu;
src: url(../fonts/Ubuntu-Regular.ttf);
}
body {
position: absolute;
font-family: ubuntu;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-bottom: 200px !important;
-webkit-overflow-scrolling: auto !important;
-webkit-background-size: auto;
background-size: auto;
}
* {
margin: 0;
}
Here is the app.css file:
Nav {
position: fixed;
top: 30%;
right: 0;
z-index: 1;
}
footer {
-webkit-transform:translate3d(0,0,0);
transform: translate3d(0, 0, 0);
height: 200px;
font-size: 12px;
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
color: white;
z-index: -3;
}
.footer-wrapper{
display: table;
}
.footer-content{
display: table-row;
text-align: center;
}
.footer-icons{
color: rgb(500, 500, 500, 0.5);
height: 32px;
width: 32px;
margin: 8px;
margin-bottom: 32px;
margin-top: 32px;
}
.footer-icons:hover{
color: white;
}
.main{
background-color: white;
position: relative;
z-index: 0;
height: 100vh;
width: 100vw;
-webkit-overflow-scrolling: auto !important;
}
.preloader{
width: 100vw;
height: 100vh;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
}