I have an issue on my website that drives me nuts. When I refresh a page, it jerks. The text behaves like it compresses and then goes back to normal. I have no idea, what's causing it. I removed 90% of my code but the issue still persists. I would appreciate any help in solving this mystery. The code is below.
function myFunction() {
var x = document.getElementById("topLinks");
if (x.style.display === "block") {
x.style.display = "none";
}
else {
x.style.display = "block";
}
}
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
}@import url('https://fonts.googleapis.com/css?family=Noto+Serif:400,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@300;400;700&display=swap');
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
}
body {
background: url(img/background.png) fixed;
}
.abbr {
cursor: help;
}
/* CONTENT DIV */
.content {
max-width: 75%;
margin: 0 auto;
margin-top: 8px;
margin-bottom: 8px;
line-height: 1.6em;
font-family: 'Noto Serif', serif;
background: rgba(78, 192, 253, .7);
overflow: hidden;
padding: 1em;
text-align: left;
min-height: 100%;
font-size: 1.6em;
}
/** SIDEBAR **/
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 24px;
font-size: 32px;
margin-left: 50px;
}
/* Style the list */
ul.breadcrumb {
padding: 12px 18px;
list-style: none;
background-color: #0288d1;
border-radius: 18px;
margin-top: 12px;
font-family: 'Noto Serif', serif;
}
.openbtn:before {
content: url("data:image/svg+xml,%3Csvg class='bi bi-list' width='1em' height='1em' viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M2.5 11.5A.5.5 0 013 11h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5zm0-4A.5.5 0 013 7h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5zm0-4A.5.5 0 013 3h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5z' clip-rule='evenodd' /%3E%3C/svg%3E");
}
.openbtn {
padding: 8px;
font-size: 24px;
cursor: pointer;
background-color: #111;
color: white;
border: none;
border-radius: 18px;
font-family: 'Noto Serif', serif;
}
.openbtn:hover {
background-color: #444;
}
/* Display list items side by side */
ul.breadcrumb li {
display: inline;
font-size: 24px;
}
/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li + li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
/* Add a color to all links inside the list */
ul.breadcrumb li a {
color: #fff;
text-decoration: underline;
}
/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
text-decoration: none;
}
ul.breadcrumb li a:focus {
background-color: #01314c;
text-decoration: none;
}
ul.breadcrumb li a:active {
color: #fff;
text-decoration: underline;
}<!DOCTYPE html>
<html lang="ru">
<head prefix="og: http://ogp.me/ns#">
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html">
<title>Title here</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="style_main.css">
<link rel="stylesheet" href="style_nav.css">
<link rel="stylesheet" href="style_accordion.css">
<!-- Stylesheets -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="js_nav.js">
</script>
</head>
<a name="top"></a>
<body>
<div id="mySidebar" class="sidebar">
<a href="javascript:void(0);" class="closebtn" onclick="closeNav()">X</a>
<a tabindex="1" href="index.html">Main</a>
<a tabindex="2" href="about">About</a>
</div>
<div class="main">
<div class="header">
<nav>
<ul class="breadcrumb">
<li>
<button class="openbtn" onclick="openNav()">Menu</button>
</li>
<li><a tabindex="7" href="index.html">Main</a></li>
<li>Breadcrumb</li>
</ul>
</nav>
</div>
<div class="content">
<h1 class="h1">Heading 1</h1>
<h2 class="h2">Heading 2</h2>
<p class="subheadline">Headline
</p>
<p>some stuff</p>
<br>
<button class="accordion">Open:</button>
<div class="panel">
<ul class="skills">
<li>text here</li>
</ul>
</div>
</div>
<a href="#top">
<div class="pagetop"><svg width="1.2em" height="1.2em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4 1h8a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V3a2 2 0 012-2zm0 1a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V3a1 1 0 00-1-1H4z" clip-rule="evenodd" />
<path fill-rule="evenodd" d="M4.646 7.854a.5.5 0 00.708 0L8 5.207l2.646 2.647a.5.5 0 00.708-.708l-3-3a.5.5 0 00-.708 0l-3 3a.5.5 0 000 .708z" clip-rule="evenodd" />
<path fill-rule="evenodd" d="M8 12a.5.5 0 00.5-.5v-6a.5.5 0 00-1 0v6a.5.5 0 00.5.5z" clip-rule="evenodd" />
</svg><br>Top
</div>
</a>
</div>
</body></html>
