Привет, друзья,
мне нужна помощь с CSS. Всякий раз, когда я кликаю на любое изображение на моём сайте, заголовок .d-header смещается примерно на 2 пикселя. Я изо всех сил пытался это исправить, но не смог. Не знаю, как поправить CSS для серой области за изображением.
Нажмите на изображение по ссылке ниже, чтобы увидеть проблему:
https://engineersasylum.com/t/installing-esp8266-wifi-module-board-in-arduino-ide/436
Интересно. Я никогда этого не замечал, но это также наблюдается в большинстве (если не во всех) официальных темах Discourse, пока заголовок зафиксирован и прокрутка исчезает.
Возможно, это недавняя проблема?
Нет, так было уже много-много лет. У меня где-то валяется v1.6 для тестирования, и на ней это тоже происходит.
Обидно.
@Pravi, я тебе не благодарен, теперь я не могу «разувидеть» проблему, которую мой мозг игнорировал все эти годы 
Я думаю, это может быть связано с тем, что полоса прокрутки браузера исчезает, когда открыто окно lightbox.
У меня то же самое 
Есть ли что-то простое, что мы могли бы сделать, чтобы это исправить, @awesomerobot? Похоже, это влияет только на заголовок, а не на основное содержимое 
Это кажется, появляется, когда исчезает полоса прокрутки И у body есть класс docked (что немного отличается от того, когда заголовок зафиксирован).
Не могу поверить, что я единственный, кто заметил это за все эти годы 
. Я изменил категорию с «Поддержка» на «Ошибка».
Я думаю, проблема возникает из-за того, что при исчезновении полосы прокрутки к тегу body применяется style="margin-right: 17px; overflow: hidden; для компенсации ширины полосы прокрутки. Однако .d-header имеет fixed позиционирование, поэтому он не «наследует» margin-right у html.
edit:
Похоже, что margin у html (равный ширине полосы прокрутки) вычисляется через JavaScript в файле jquery.magnific-popup.min.js.
Не уверен, что существует быстрое и чистое решение этой проблемы.
Такое случается и с композитором, если вы хотите найти ещё что-то, что можно покритиковать 
Проблема в том, что элементы с fixed позиционированием относительно ширины области просмотра (viewport), а полосы прокрутки меняют эту ширину.
Как отмечает @Canapin, на элементе <HTML> это компенсируется дополнительным отступом (похоже на поведение Magnific Popup)… но поскольку фиксированные элементы не привязаны к <HTML>, для композитора и заголовка потребуется дополнительное исправление.
Нам нужно будет взять ширину полосы прокрутки, а затем при активации всплывающего окна добавить некоторые встроенные стили, например:
.d-header {
left: -15px; /* В этом примере ширина полосы прокрутки 15px */
width: calc(100% + 30px); /* добавляем ширину полосы прокрутки умноженную на 2, чтобы компенсировать сдвиг и ширину */
}
Реализовать это немного сложнее, чем я могу… Я думаю, что ширина полосы прокрутки, вероятно, вычисляется путём сравнения ширины страницы до и после открытия всплывающего окна? Не уверен на 100%.
Тем не менее… эта проблема станет менее актуальной, если мы перейдём на position: sticky после отказа от поддержки IE11 в этом году. Сдвиг больше не будет происходить, но справа от заголовка может остаться зазор там, где раньше была полоса прокрутки.
Можно ли установить напоминание-закладку, чтобы мы точно знали, что это произойдёт? Имею в виду поддержку sticky 
Когда это исправят?
У меня для вас небольшое исправление, оно не идеальное: всё ещё есть некоторая подвижность у заголовка, категории и иконок в заголовке, но сама панель заголовка останется на месте.
Для CSS на десктопе:
@media screen and (min-width: 1144px) {
.mfp-zoom-out-cur .d-header > .wrap {
transform: translateX(-8px);
}
}
Я не тестировал это thoroughly, и это вовсе не официальное решение, но пока вы можете попробовать. Я пока недостаточно опытен, чтобы сразу придумать лучшее решение.
Проблема из оригинального поста больше не возникает, так как теперь мы используем position: sticky; для заголовка. 