Что такое CSS для параллакса над изображением, чтобы исправить ошибку в браузере Chrome?

Question

У меня есть веб-сайт, на котором я хочу иметь фоновое изображение, которое позволяет прокручивать содержимое страницы без перемещения изображения. Я исследовал это в течение 3 дней (я использую хром). Я перепробовал 100 различных решений, но в итоге то, что большинство людей считают правильным способом настройки CSS. Все варианты, которые я пробовал, привели к одной и той же проблеме. Прошлой ночью я наконец понял, что проблема, с которой я столкнулся, возникает ТОЛЬКО в браузере Chrome. Я использую Windows 10 и имею последние версии всех браузеров. Итак, вот изображение того, как выглядит страница в IE, Edge, Firefox... все это правильно. Ну, я пытался загрузить изображения, но IMGUR не позволил мне, что может сделать это чрезвычайно сложным для объяснения. Позвольте мне начать с того, что вот фрагмент HTML:

<div class="dashboard-background">
   ... other divs inside this one
</div>

А вот CSS для фона панели инструментов:

.dashboard-background {
  height: 100vh;
  width: 100%;
  background-color: #0a568c;
  background-image: url("/images/full-bkg.png");
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: right; /* I've tried cover also */
}

кстати, я знаю, что мне не нужен цвет фона, но я добавил его, чтобы помочь с отладкой. Так вот в чем проблема: во всех браузерах, кроме chrome, изображение заполняет div, и оно выравнивается по правому краю, как и должно быть, а данные внутри div прокручиваются так, как я хочу. Тем не менее, в Chrome div правильно расположен и имеет размеры, но фоновое изображение сдвигается влево примерно на 250 пикселей, открывая синий цвет фона, который я установил в CSS.

Здесь действительно трудно объяснить, не видя картинки. Весь сайт имеет боковое навигационное меню. Боковое меню останется открытым / видимым, если окно браузера имеет ширину не менее 768 пикселей. Так что для мобильных устройств, если размер браузера меньше 768 пикселей, боковое меню будет закрыто. Тогда есть 3 бара (кнопка) в верхней части страницы, чтобы открыть меню, так же, как работают многие мобильные приложения. Поэтому я обнаружил, что боковое меню влияет на фоновое изображение, которое я пытаюсь исправить в моем div. Если я уменьшу окно браузера так, чтобы боковое меню закрылось, фоновое изображение сместится вправо, где и должно быть. Если я затем нажму кнопку с 3 полосами вверху, то, когда меню сдвигается вправо, чтобы открыть, фоновое изображение сдвигается влево с той же скоростью, что и боковое меню. Если я затем закрою меню, фоновое изображение снова сместится туда, где и должно быть. Ясно, что именно это и является причиной этого, но HTML так далеко друг от друга, что не имеет смысла, и боковое меню, кажется, не влияет ни на что другое на всем сайте.

Было бы довольно много html и css, чтобы попытаться показать все боковое меню, но я пытаюсь иметь в виду, что это прекрасно работает во всех других браузерах, поэтому я надеялся, что кто-то знает о какой-либо известной проблеме с Chrome это повлияет на фоновое изображение. Также помните, что это не div, который движется, если я использую chrome, чтобы "осмотреть" div, он показывает точно в правильном месте, а синий показывает, что он находится в правильном месте. Кажется, что это влияет только на положение фонового изображения в div. Любая помощь будет принята с благодарностью.

ОБНОВЛЕНИЕ: я нашел виновника, но я все еще не знаю, как это исправить или почему это влияет на фоновое изображение. Следующий CSS применяется к элементу div, который охватывает все на странице, кроме бокового меню, которое используется для того, чтобы при открытии бокового меню (шириной 250 пикселей) все на странице сдвигалось вправо на 250, поэтому оно не закрывалось вверх по боковому меню. Если браузер не очень маленький, как на мобильном телефоне, в этом случае меню будет скользить поверх содержимого страницы, что все правильно, и все это работает.

@media (max-width: 767px) {
    #app-container.push-right #sidenav ~ #body-container {
        left: 250px;
    }
}

Поэтому, если я закомментирую вышеупомянутый CSS, тогда мое фоновое изображение в Chrome будет работать так, как должно. Однако остальное содержимое страницы теперь не сдвигается вправо, поэтому оно скрывается боковым меню. Поэтому я должен оставить CSS, потому что это правильно. Для меня это звучит просто как ошибка в Chrome, но я не знаю, как создать обходной путь.

Будет ли это работать:

@media (max-width: 767px) {
    .dashboard-background {
        /* for chrome browser only shift background-image */
        /* to the right by 250px; */
    }
}

Если бы кто-то мог сказать мне, как использовать Chrome только CSS и как сместить фоновое изображение на 250 пикселей, я мог бы решить эту проблему.