Страница черная после загрузки в Chrome [закрыто] ⇐ CSS

[Anonymous]

По сути, у меня есть этот веб-сайт
, который по какой-то причине отображается черным при загрузке как в Arc, так и в Chrome, и я понятия не имею, почему
вот картинка, показывающая, что происходит на первой секунде
изображение проблемы с загрузкой
вы можете посетить его и попробовать сами
также, когда вы перемещаетесь между страницами, загрузка iframe становится черной, что может мешатьтакже, когда вы перемещаетесь между страницами, загрузка iframe становится черной, что может беспокоить
вот уродливый исходный код, если кому-то интересно
вот CSS, используемый в веб-сайт

Код: Выделить всё

* {
font-family: "Roboto", sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}

.header {
position: relative;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 25px;
transition: 0.3s;
}

.logo a {
display: block;
}

.logo a img:hover {
transform: scale(0.9);
}

.logo a img {
transition: 0.7s;
display: block;
transform: scale(0.8);
margin-top: 5px;
padding-bottom: 8px;
width: 100%;
}

.navigation {
display: flex;
justify-content: space-between;
align-items: center;
}

.menu {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
z-index: index 1;
transition: 0.5s;
background-color: #f4f4f4;
}

.menu li {
list-style-type: none;
}

.menu li a {
text-decoration: none;
color: black;
display: block;
padding: 40px 25px;
font-size: 18px;
line-height: 1;
transition: 0.3s;
}

.menu li a:hover {
box-shadow: 0 -5px 0px black inset, 500px 0 0 rgba(0, 0, 0, 0.1) inset;
padding: 35px 25px 45px 25px;
}

.hamburger {
position: relative;
width: 30px;
height: 4px;
background: black;
border-radius: 10px;
cursor: pointer;
z-index: 2000;
transition: 0.3s;
}

.hamburger::before {
content: "";
position: absolute;
height: 4px;
right: 0;
background: black;
border-radius: 10px;
transition: 0.3s;
top: -10px;
width: 20px;
}

.hamburger::after {
content: "";
position: absolute;
height: 4px;
right: 0;
background: black;
border-radius: 10px;
transition: 0.3s;
top: 10px;
width: 25px;
}

.toggle-menu {
position: absolute;
width: 30px;
height: 100%;
cursor: pointer;
opacity: 0;
z-index: 3000;
}

.hamburger,
.toggle-menu {
display: none;
}

.navigation input:checked ~ .hamburger {
background: transparent;
}

.navigation input:checked ~ .hamburger:before {
top: 0;
width: 30px;
transform: rotate(-135deg);
}

.navigation input:checked ~ .hamburger:after {
top: 0;
width: 30px;
transform: rotate(-225deg);
}

.separator {
border-top: 1px solid #a8a8a8;
margin-bottom: 10px;
margin-inline: 15px;
}

.navigation input:checked ~ .menu {
right: 0;
box-shadow: -20px 0 40px rgba(0, 0, 0, 0.3);
}

@media screen and (min-width: 1000px) {
.navigation input:checked ~ .menu {
box-shadow: none;
}
}

@media screen and (max-width: 1000px) {
.hamburger,
.toggle-menu {
display: block;
}

.header {
padding: 10px 20px;
}

.menu {
overflow-y: auto;
justify-content: start;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
right: -300px;
width: 300px;
height: 100%;
padding-top: 113px;
z-index: 1000;
background-color: white;
}

.menu li {
width: 100%;
}

.menu li a,
.menu li a:hover {
padding: 30px;
font-size: 24px;
box-shadow:  0 1px 0 rgba(0, 0, 0, 0.1);
}
}

Код: Выделить всё

    






[*]

Riddle Hub







[url=#]
[img]logo.png[/img]
[/url]




[list]
[url=#]Home[/url]
[*][url=#]Create a Riddle[/url]
[*][url=#]My Riddles[/url]
[*][url=#]
Login
[/url]
[*][url=#]
Sign Up

[/url]
[/list]

оказывается, проблема заключалась в том, что темная программа чтения отображала контент в черном цвете



п>

Подробнее здесь: https://stackoverflow.com/questions/790 ... -on-chrome