Working on personal site, found that whenever ANY of the HTML anchors is clicked, it completely breaks the site OR simply doesn't link to the appropriate location on the webpage. Typically occurs on Firefox, but site works fine on Edge and Chrome.
The live version of the site is here: http://smithchrisgraphics.com/
The issue is most obvious when using Firefox; when I tested my site using Edge, I didn't have any problems. I tried reducing the HTML and CSS down to see if I could pinpoint the issue, and I still don't know what is causing the bug. Any help pinpointing what's wrong would help. I removed all external js files.
@charset "UTF-8";
/* CSS Document */
html
{
overflow-x:hidden;
scroll-behavior: smooth;
}
body
{
min-height: 500vh;
max-width: 100vw;
width: 100%;
font-family: 'Roboto Slab', serif;
overflow: hidden;
position: absolute;
left: -13px;
z-index: -3;
/*outline: 1px solid red;*/
}
.displaySection
{
position: relative;
top: 100vh;
left: 0;
width: 100%;
background-color: red;
padding: 20px 0 20px;
margin: 5px 0 5px 5px;
min-height: 100vh;
overflow-y: visible;
overflow-x: hidden;
}
a
{
text-decoration: none;
}
ul
{
list-style: none;
}
hr
{
margin: 50px 10px 10px 10px;
}
#wrapper
{
width:100vw;
}
#NameDrop
{
position: relative;
top: 50vh;
transform: translateY(-60%);
list-style:none;
margin:0;
padding:0;
text-align:center;
z-index: 5;
}
#NameDrop ul
{
text-decoration-line: none;
list-style-type: none;
margin: 0 auto;
left: 40%;
}
#NameDrop ul li
{
text-decoration-line: none;
display: inline;
text-align: center;
width: 25%;
margin: 0 auto;
}
#NameDrop li a
{
display:inline-block;
position: relative;
padding:10px 20px;
left: -20px;
color: black;
text-decoration-line: none;
font-size: 14pt;
border-radius: 30px;
opacity: 1;
/* Safari 4.0 - 8.0 */
-webkit-animation-name: SlowFade;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0.7s;
-webkit-animation-iteration-count: 1;
/* Standard syntax */
animation-name: SlowFade;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 0.7s;
animation-iteration-count: 1;
animation-direction: forwards;
animation-fill-mode: forwards;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
-mozilla-transition: 0.3s;
transition: 0.3s;
}
#NameDrop li a:hover
{
background-color:rgba(151,0,2,1.00);
color: white;
text-decoration-line: none;
}<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
<!-- External CSS Files -->
<link href="css/home.css" rel="stylesheet" type="text/css">
<!-- Need script for anchors due to HTML5 Bug on browsers -->
<script>
function snapToAnchor(anchor)
{
document.getElementById(anchor).scrollIntoView(true);
}
</script>
</head>
<body>
<div id="NameDrop">
<ul>
<li><a href="#link01">About</a></li>
<li><a onclick="snapToAnchor('link02')">Design</a></li>
<li><a onclick="snapToAnchor('link03')">Experience</a></li>
<li><a href="#link04">Education</a></li>
<li><a onclick="snapToAnchor('link05')">Contact</a></li>
</ul>
</div>
<!-- Each section should take up a minimum of at least 1 full screen -->
<div id="link01" class="displaySection">
</div>
<div id="link02" class="displaySection">
</div>
<div id="link03" class="displaySection">
</div>
<div id="link04" class="displaySection">
</div>
<div id="link05" class="displaySection">
</div>
</body>
</html>If there is ANY extra details I can provide to help, or you have any clue what could be causing this, please let me know!
This is caused by the
overflow: hiddenstyle on the body tag, when removed the anchor links works properly.This can be related to this question Why is this page layout breaking when an anchor link is used