Роман Якимчук

Не понял до конца вопроса, но есть два момента:

1. Не совмещайте top и bottom с margin (top & bottom) для абсолютных элементов, потому что это решение одной задачи разными способами, и, честно говоря, даже не знаю как себя поведет браузер

2. margin: auto берет контейнер в котором размещается элемент, и "центрует" его путем добавления margin по разные стороны элемента в равной доле, поэтому для ваших 27% margin вышел больше, чем для большей высоты самого элемента. Но опять же, странное дело, потому что для абсолюта + top & bottom он должен был по идее растянуть его во весь экран, а не делать margin.

Это мысли вслух, может быть чем-нибудь поможет.

Это изображение, его нельзя адаптировать без доп. решений, например:

1. Растягивать / сжимать при изменении размера страницы, но это неудобно на небольших девайсах
2. Работать с навигацией, т.е. сделать возможность навигации по изображению если оно не помещается на экране (наподобие карт)
3. Изменить логику под небольшие размеры экранов, написать отдельное решение

И в целом верно сказали, надо map, или svg.

Это не нативный компонент, его нужно разработать или использовать готовое решение
Ищите Predictive Search. Если нужно с дропдауном, не знаю как оно называется, но обычно в UI kit'ах они есть.

Простые правила:

• Текст должен быть обычного размера
  
• Для экономии пространства не делаем огромных отступов (если нужно)
  
• Скролл по горизонтали и вертикали
  
• Sticky-заголовки или колонки для удобства
  
• Если нужно вывести доп. данные, то можно сделать через подсказки при наведении, например
  

Задача чтобы выводились все критические данные и было удобно читать, а всё остальное через интерактив.
У нас есть таблицы с 10-20+ колонок, и тысячи строк, плюс фильтры, сортировки, но показать не могу, NDA.

Если есть время, можно прикрутить управление колонками (скрытие/отображение, изменение размера, и прочее), это значительно упростит пользование таблицей.

Либо прокси, как сказано выше, либо два хардкорных варианта:
1. Использовать canvas и загружать картинки динамически с последующим выводом в тег Image из локального буфера. Даже не знаю что там будет в src, но уверен не исходный URL.
2. Вообще без URL, просто base64 использовать

Судя по всему, какой-то браузерный баг – вижу что ошибка, вероятно, происходит после вызова таймера на изменение слайда на странице, и это вызывает Paint (перерисовку) всей страницы, и в этот момент происходит мерцание (видимо, баг отрисовки в браузере).

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

Интересный случай, по идее всё должно работать.
Если добавить родителю (.wrapper) свойство white-space: break-spaces, то всё работает, но почему, не понятно.

В исходнике много проблем, надо перебирать все классы, опишу проблемы в одном из классов:

background: url(img/section_bg.png) no-repeat;
position: absolute;
background-size: cover;
align-items: flex-end; // Оно не будет работать, потому что родитель не флексовый
width: 100%; // Элемент 100% ширины, а родитель 73%, и уже поэтому размеры могут не совпадать и верстка поедет
height: 25%;
min-height: 374px;
margin-left: 2.6%; // Из-за этого элементы могут встать неровно
margin-top: 1200px;

Мои рекомендации:
1. Уберите абсолютное расположение
2. Уберите все ширины, боковой margin элементов, пусть они тянутся по ширине родителя
3. Установите нужный размер родителя
4. Сделайте нужную высоту нужных элементов
5. Уберите лишние свойства (вроде float: center, который просто не существует, или align-items который не будет работать без flex-контейнера)

Подарите дизайнеру сервый карандаш и попросить нарисовать цветную картину :)
Это к тому, дизайнер должен понимать принципы веб и такие вещи не придумывать, чтобы потом разработчики не страдали.

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

Есть второй вариант, это JavaScript, т.е. программировать цвет элементов, в том числе этого "перехода" скроллбара. Сложное решение чтобы описать словами, но если коротко, то писать свой скроллбар, этот ползунок делать как два элемента одинакового или разного цвета, и в зависимости от прокрутки менять их размер и цвет, получится эффект "перехода".

Вариант №3, опять же JavaScript, это реализация через canvas.

Вариант №4, и он самый лучший, это согласовать изменения в дизайне.

Вообще, это сложность для веб, управлять не прямоугольной графикой.

Как вариант, внутри разместить круглый синий круглый блок (border-radius 50%), который будет намного больше родительского контейнера, и будет скрыт за его границами, т.е. визуально будет видно прямоугольник. При наведении делается transform: scale, и он уменьшается до нужных размеров. Фон родительского контейнера сделать серым.

Правда, всё зависит от анимации которая вам требуется.

И, вот этот текст, чтобы под блоком был белый, а дальше черный. Попробуйте вот это: https://developer.mozilla.org/en-US/docs/Web/CSS/f...

Судя по вашему сообщению, проблема не в форме. Обычная HTML форма при отправке формирует тело запроса (или query) и открывает страницу заданную в форме с нужным типом запроса (GET/POST).

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

>я тут немного посидел, если кратко: функция "public function submit()" в файле-обработчике php(сама отправка на email) - до неё доходит обработка: в начале функции пишу die - срабатывает. Видимо iframe быстро перезагружается - и отправка отменяется, но это не точно.
Судя по всему, проблема не в форме, если запрос доходит. Проверьте метод запроса, параметры запроса, заголовки, и если всё в порядке, тогда проблема в обработчике.

Не совсем понял задачу, но похоже вам нужен просто `position: sticky`. В этом случае элемент будет "приклеен" к границе окна при прокрутке страницы. Положение такого элемента относительно границ окна можно регулировать, насколько я помню, через `top`, `right`, `bottom`, `left`.

https://developer.mozilla.org/en-US/docs/Web/CSS/p...
Вот здесь есть пример как оно работает

Собирайте все анимируемые элементы (если анимируете группой) в один абсолютный, и двигайте через transform: translateX(<смещение>), translateY(<смещение>), translateZ(<смещение>) вместе со свойством transition. Это все CSS3.

Как альтернативный вариант, тег , в том числе WebGL (например, инструмент https://github.com/PixelsCommander/HTML-GL)

Общее правило по оптимизации анимаций, в котором нужно двигаться — максимально уменьшите количество анимируемых элементов, их сложность (вложенность), каскадность стилей, делайте элементы абсолютно позиционированными, простыми (без прозрачности, градиентов, закруглений, и прочего), делайте самый минимум DOM модификаций, и по-возможности анимируйте при помощи CSS3 или .

Нужно чтобы браузер выполнил минимум операций при перерисовке страницы во время анимации.

Чтобы посмотреть что рисует браузер во время анимации, есть удобный инструмент.
https://developer.chrome.com/devtools/docs/renderi...

На скриншоте есть "Show paint rectangles". Включите это, увидите как браузер реально перерисовывает страницу.