Анатолий

<div class="lazy" style="background-image: url(1_mini.jpg)" data-src="1.jpg"></div>
<div class="lazy" style="background-image: url(2_mini.jpg)" data-src="2.jpg"></div>
<div class="lazy" style="background-image: url(3_mini.jpg)" data-src="3.jpg"></div>
<div class="lazy" style="background-image: url(4_mini.jpg)" data-src="4.jpg"></div>
<div class="lazy" style="background-image: url(5_mini.jpg)" data-src="5.jpg"></div>

<script>
  var lazyImage = document.getElementsByClassName('lazy');
  img = new Array();
  for ( var i=0; i < lazyImage.length; i++ ) { img[i] = new Image(); }
  i = 0;

  ttt();

  function ttt() {
    img[i].onload = function() {
	lazyImage[i].style.backgroundImage = "url(" + lazyImage[i].getAttribute('data-src') + ")";
	i++;
	img[i].src = lazyImage[i].getAttribute('data-src');
	ttt();
    }
  }
  
 img[i].src = lazyImage[i].getAttribute('data-src');
</script>

Нашел 2 способа, оба нормально работают:
1) C помощью программы Font Forge fontforge.github.io/en-US
программа мощная и не простая, потерял пару часов, чтобы понять детали
2) С помощью сервиса fontastic.me
буквально в пару кликов

но они woff2 не делают!
Не беда, на помощь приходит конвертер:
https://everythingfonts.com/ttf-to-woff2

Вопрос решил!

<script>
if (!("ontouchstart" in document.documentElement)) {
  document.documentElement.className += " no-touch";
}
</script>

и далее дописал, где используется hover и focus
.no-touch
проверил, работает!

IE9-11 desktop & mobile don't properly scale SVG files. Adding height, width, viewBox, and CSS rules seem to be the best workaround.

Проблема заключается в том, что шапка браузера в мобильных версиях динамична выезжает/заезжает, поэтому и происходит весь этот без предел.

Решил перейти на position: sticky, в принципе основные браузеры проверенные мной, даже на старом телефоне адроид 4.4 прекрасно работают, не говоря о современных гаджетах.

javascript раз уже написал, оставлю его исключительно для IE11, остальные десктопные браузеры нормально работают.

Вопрос закрываю.

---------------------------------------------------

Спустя 2 дня:

Реализовать что-то с помощью position sticky, к сожалению так и не удалось. Все дело, в том что он работает не так как я предполагал, а именно если указать "top: 0", то блок будет находится вверху (не перематываясь), пока есть свободное пространство внизу его родителя, потом он прокручивается вверх. Но вот "bottom: 0" работает не так как я предполагал, я думал, что блок "промотается" вниз, а далее будет ждать когда закончится свободное пространство родителя. Но это не верно! Bottom работает схематично так:

<родитель>
  <блок_пустышка></блок_пустышка>
  <блок_стики></блок_стики>
</родитель>

блок_стики проматывается как и предполагалось вниз, но не до конца родителя, а до конца блока_пустышки, при этом он находится над блоком пустышкой.
Когда высота блока_пустышки заканчивается, то он подцепляется к нему паровозиком и улетает вверх, даже не дождавшись когда закончится свободное пространство родителя. Если блока_пустышки нет, то блок_стики будет cверху, точно также как, если бы свойство "position: sticky" ему не задавали бы совсем.

Попробовал скрипт leafo.net/sticky-kit но на мобильных браузерах он ведет себя очень плохо, при скроле страницы, плавность отсутствует, и из-за плавающей шапки браузера, все те же проблемы, что и с моим скриптом.

Вывод сделал такой, что верну свой скрипт на десктопные браузеры, а на все мобильные просто забью.

Мой скрипт: https://codepen.io/workcode/pen/RqwpzM
Пример "position: sticky": https://codepen.io/workcode/pen/JeYaOx

Помог пример: shpargalkablog.ru/2017/07/position-fixed-parent.html

Вроде решил вопрос:

.flex { margin-left: -20px;}
.flex > div { padding: 20px 0 20px 20px; }

PS. У .flex был margin auto, но это просто пример. Чтобы снова выравнять по середине, достаточно еще раз обернуть в div и применить этот самый margin auto.

Нашел еще интересное решение: https://codepen.io/workcode/pen/oQxNYW

Для тега <main> прописал width: 100%;
Заработало!

Похоже надо в стилях сразу прописать всем контейнерам 100%, а то IE11 не догоняет ))

------
Позднее:
Прописал всем тегам про запас - IE11 взбесился, так что все таки надо прописывать избранным, у кого с этим проблемы.

-------
Намного позднее..

в итоге правильно будет писать flex: 1 1 auto; а не width: 100%

Опять банальщина, не знаю как я добавил строку log_level 1 в файл /etc/munin/munin.conf
из этого и не работало, удалил ее и заработало.
log_level 1 надо прописывать только в /etc/munin/munin-node.conf

Решил углубится в тему, вот результаты:

Директива open_file_cache применяется для кеширования информации о статических файлах: js, css, jpeg, html,..
Если файл не существует, или не прав на чтение, то эта информация также может хранится в кеше.
По умолчанию: open_file_cache off;

Пример с описанием:

# Информация о 1000 файлов, может хранится в кеше. Если не было активности к файлу в течение 5 мин, то информация о нем удаляется из кеша
open_file_cache max=1000 inactive=5m;  

# Активностью считается обращение к файлу хотя бы 2 раза. В кеш они также попадают, если было хотя бы 2 обращения к файлу
open_file_cache_min_uses 2;             

# Вся информация о файлах в кеше обновляться раз в 1 минуту
open_file_cache_valid 1m;               

# Сохранять ли информацию об ошибках, например, если файла, к которому вы обратились - нет, то это будет тоже в кеше, информация тоже обновится через 1 мин
open_file_cache_errors on;

При работе со статическими файлами, когда они изменяются, например верстке.
На время работ желательно отключать open_file_cache, либо параметр open_file_cache_min_uses делать достаточно большим, чтобы файл не попадал в кеш, но это фактически тоже самое что и отключить open_file_cache.

Если файл находится в кеше, при этом происходит изменение файла, то сервер выдаст ошибку ERR_EMPTY_RESPONSE, что значит, что сервер отказал в доступе и не отдал контент.
При этом сам сервер работает нормально и если обратится к другим файлам, то они легко загружаются.
Примечателен факт, что если восстановить измененный файл, то сервер его начинает отдавать до проверки open_file_cache_valid. Видимо проверяется контрольная сумма файла, так как дата изменения файла меняется.

При работе с файловой системой NFS, рекомендуется не включать open_file_cache, так как информация о файлах может не обновляться даже после open_file_cache_valid.

Написал, а то может кому интересно будет или я забуду :)

Проблему таки решил.
У меня по Wi-Fi раздает роутер Mikrotik.
Пробовал изменять адрес DNS в DHCP сервере, заменил ip-роутера на 8.8.8.8 - не помогло.
Проблему решил банально, просто прописал присваивать ip-адрес в DHCP статически, и все заработало.
Не понимаю, почему "динамика" не сработала именно с этим гаджетом, с остальными таких проблем нет. Не могу прокомментировать, кто тут виноват, вроде как и DHCP выдавал верные настройки, и телефон получал их, но не работало.
Вот такое неоднозначное решение. Написал, так как вдруг кому поможет. А то я уже хотел перепрошить прошивку на телефоне кастомную. Хотя может и перепрошью, много чего мне в телефоне не нравится, но это уже другая история.

Нашел решение, нужно указать еще height, хотя бы равный 1px.
Тогда минимальная высота будет работать как надо, и выравнивание тоже сработает.

Мигрировал с pdd в Connect, но проблему это не решило.

Обратился в тех.поддержку Яндекс по email: connect@support.yandex.ru
Где попросил объяснить как работать в Connect через API, например, чтобы менять ip-адрес в DNS-имени, на что получил ответ:

К сожалению, в API Коннекта на данный момент отсутствует возможность управлять DNS-записями. Приношу извинения за неудобства!

Если для Вас критичен данный функционал, наши специалисты могут вернуть Ваш домен обратно в Почту для домена.

Попросил меня вернуть обратно на pdd.yandex.ru, но после возврата, API так и не заработал.
Я вновь написал в тех.поддержку и сказал о проблеме, сказали что разберутся и вопрос передан куда надо, но по прошествии недели - тишина. Короче, я бросил это занятие и отказался от yandex.

Вывод: pdd убили, а новое еще не работает. Зачем так делать, я не понимаю.

Написал сюда, может кому будет интересно.

Тему закрываю.

-------------------------------------------
Прошло 2 недели после прошлого сообщения от Яндекса, и неожиданно пришел новый ответ от Яндекса, что нужно:
"Чтобы получить доступ к API, пожалуйста, получите новый токен."

Удалил старый токен и создал новый, все заработало.
PS. Очень долго отвечают.
24.07.2018

---------------------------------

Прошло 4 месяца, при попытке зарегистрировать новый домен на pdd, сайт перекидывает на коннект.
Написал в тех.поддержку, чтобы уточнить что за дела. Мне ответили.
PS. Что интересно, что ответили в тот же день, ну дела ))

Ответ от тех.поддержки Яндекса:

Подключать новые домены к Почте для домена действительно уже нельзя. Сейчас есть возможность подключиться только к сервису Коннект.
Разработчики сервиса знают о пожелании пользователей добавить возможность редактировать DNS в API Коннекта и работают над этим. Конкретных сроков появления этой функции мы, увы, пока назвать не можем.

Проблема была в том, что нужно было писать <!--more--> в закладке "Текст", а если писать в закладке "Визуально", то текст заменится на <!--more-->

Вопрос можно закрыть не знаю на сколько он решен, но сейчас вроде все работает.
Что сделано:
1. разбил css файл на 3 части - работала только 1 часть, при подключении остальных переставало.
2. разбил на 6 частей, чтобы понять, где же собака порылась, но почему-то все заработало.
3. собрал опять все в один файл, сейчас все работает.

Ничего из кода не менял и не удалял. Я в шоке, что это за магия.

Заменил get_the_post_thumbnail_url() на the_post_thumbnail_url() вроде заработало.

Прописал строку в crontab:
PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin

заработало
хотя ее скопировал из консоли:
echo $PATH