Евгений Петров

Ну так при абсолютном позиционировании блоки друг друга не учитывают и дружно считают координату Y от padding box контейнера.

Как только позиционирование сменилось на относительное, блоки стали учитывать друг друга, а координата стала означать не расстояние от padding box контейнера, а смещение относительно стартовой позиции.
То есть блоки расположились друг под другом, затем первый сдвинулся вниз на 72 пикселя, а второй на 98. так и образовалась разница в 26 пикселей.

Так что определитесь — как и зачем вам двигать блоки, ибо координаты в относительном позиционировании сдвигают элемент, а остальные про это не знают ничего.

Если использовать DOMContentLoaded, то не придётся ждать загрузки всего контента.

Видео можно динамически добавлять на страницу и после формирования DOM основной страницы.
Как вариант — для каждого видео ставится картинка-постер, а при клике вставляется или инициализируется то, что требуется в зависимости от источника.

У всех полей есть пары
checked — defaultChecked (radio, checkbox)
selected — defaultSelected (option)
value — defaultValue (всё остальное)

Событие reset возвращает все поля к значениям по умолчанию. Эти значения по умолчанию можно поменять — в этом случае сброс будет осуществляться к новому значению.

Для обычных полей нужно вручную возвращать исходное состояние. Например, для текстовых полей:

someField.value = someField.defaultValue;

Операции с типом file таким образом невозможны — его придётся удалять и вставлять на его место дубликат.

Ну вообще-то это — жесть.
Вот пример jsfiddle.net/petroveg/rh0nkamw

Ошибки:
— не указан оператор var
— используется инлайн-атрибут события
— не используется делегирование обработки события
— куча однотипных действий

HTML

<form action="" data-container="city">
	<select name="fromcity">
		<option value="">-- Please Select --</option>
		<option value="Perviy">Perviy</option>
	</select>
	<select name="fromdistrict">
		<option value="Vtoroy">Vtoroy</option>
	</select>
</form>

JS

$(document).on('change', '[data-container="city"]', function (e) {
	console.log(e.target);
	console.log($(e.target.form).serialize());
});

С помощью SVG такая задач решается просто.

После разных библиотек остановился на iScroll.

Причина (аж в 2-х файлах прописано):

.modal{
	bottom: 0; 
}

Ну и + у ребёнка margin сверху и снизу (нижний точно нужен?).
Исправить просто либо с помощью flex, либо с помощью translate.

HTML

<div class="modal">
	<div class="content"></div>
</div>

FLEX

.modal{
	display:flex;
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
}
.content{
	width:300px;
	height:400px;
	margin:auto;
	border-radius:20px;
	background:#369;
}

TRANSFORM

.modal{
	position:fixed;
	right:50%;
	bottom:50%;
	transform:translate(50%, 50%);
}
.content{
	width:300px;
	height:400px;
	border-radius:20px;
	background:#369;
}

jsfiddle.net/petroveg/9s5xv3zt/1

Вот с помощью SVG. Напрямую в UTF-8 не понимает IE (до сих пор).
Ну а тот же код, конвертированный в Base64, понимают все (IE с 9-й версии).

Так если вы динамически создаёте — ссылки на созданные элементы сохраняйте в переменных или свойствах объекта.