После прокрутки вниз и резервного копирования внизу страницы появляется пустое пространство (мобильное устройство) ⇐ CSS

[Anonymous]

Я только что заметил, что когда я прокручиваю пару своих веб-страниц вниз, прокручиваю обратно вверх и снова вниз, внизу появляется большое белое пространство там, где должен быть фон. Я рассмотрел несколько других решений, таких как: Случайное пустое пространство внизу страницы, но только на мобильных устройствах, но решение, похоже, не решило проблему. Я не могу воспроизвести проблему с помощью инструментов разработчика Chrome, выбрав мобильное устройство, поэтому мне не удается определить, какая ошибка в моем коде может вызвать такое поведение. Вот соответствующий код для одной из страниц:

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

function offset(elementToOffsetBy, elementToOffset, minScreenSize) {
var width = $(window).width();
if(width >= minScreenSize) {
var x = document.getElementById(elementToOffsetBy);
var height = x.offsetHeight;
var top_offset = height * -1;
document.getElementById(elementToOffset).style.top = top_offset + "px";
document.getElementById(elementToOffset).style.bottom = "0px";
}
}

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

body, html {
height: 100%;
}

#portfolio {
background: url("https://ndmikkiholicdotcom.files.wordpress.com/2016/06/black-and-white-brick-wall-background-white-brick-wall-image-decoration-picture-white-brick-wall.jpg") no-repeat center center fixed;
background-size: cover;
}

.topnav {
overflow: hidden;
}

.topnav a.selected {
background-color: rgba(242, 242, 242, .3);
color: #3b4e6b;
}

.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 20px;
padding: 20px 25px;
}

.topnav a:hover {
color: #3b4e6b;
background-color: rgba(242, 242, 242, .3);
}

.topnav .icon {
/* Hide icon to expand menu */
display: none;
}

/* When screen is less than 600px wide, hide all links except the first one, and display the icon to expand the menu */
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}

/* When screen is less than 600px wide, display all links vertically when icon is clicked */
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
color: #f2f2f2;
background-color: #3b4e6b;
}

.topnav.responsive a:hover {
color: #3b4e6b;
background-color: #f2f2f2;
}
}

.portfolio_img {
width: 80%;
height: 80%;
margin-left: 4em;
margin-right: 4em;
margin-bottom: 3em;
margin-top: 3em;
}

.hover_img {
display: inline-block;
width: 100%;
height: 100%;
}

.hover_img:hover img {
opacity: .2;
}

.hover_img:hover .center_text {
display: block;
}

.center_text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
font-weight: bold;
}

.col-md-4 {
position: relative;
text-align: center;
}

.row {
display: flex;
display: -webkit-flex;
flex-wrap:  wrap;
}

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

Portfolio











[url=index.html]Home[/url]
[url=about.html]About[/url]
[url=#]Portfolio[/url]
[url=contact.html]Contact[/url]
[url=https://github.com/]Breakout[/url].




Websites[/b][b]


[img]https://pixy.org/images/placeholder.png[/img]
[url=https://pixy.org/images/placeholder.png]Chemistry Flashcard Web App[/url]




[img]https://pixy.org/images/placeholder.png[/img]
[url=https://pixy.org/images/placeholder.png]Personal Website[/url]




[img]https://pixy.org/images/placeholder.png[/img]
[url=https://pixy.org/images/placeholder.png]Website[/url]




Publications[/b]



[img]https://pixy.org/images/placeholder.png[/img]
Author of [url=https://www.arcadiapublishing.com/]Book[/url]




[img]https://pixy.org/images/placeholder.png[/img]
[url=http://redalertpolitics.com]Red Alert Politics[/url]




[img]https://pixy.org/images/placeholder.png[/img]
Lone Conservative

Вот скриншот страницы до:



Вот скриншот страницы после:



Подробнее здесь: https://stackoverflow.com/questions/468 ... nd-back-up