Почему мое фоновое изображение исчезает / мерцает (начальная загрузка)?

Я заметил интересную проблему со своим сайтом. У меня есть раздел со статическим фоновым изображением, и когда вы прокручиваете его, поверх него появляется цитата и кнопка (в конечном итоге будет ссылка на магазин). Насколько мне известно, раньше это работало, но вчера я заметил, что через несколько секунд фоновое изображение исчезло, заменив его серым фоном. Изображение будет немного мигать, а затем навсегда заменится серым фоном.

Вот мой HTML:

<section class = "bar background-image-fixed-2 no-mb color-white text-center">
    <div class = "dark-mask"></div>
    <div class = "container">
        <div class = "row">
            <div class = "col-md-12">
                <div class = "icon icon-lg"><i class = "fa fa-leaf"></i>
                </div>
                <h3><em>"Herb is the healing of a nation" - Bob Marley</em></h3>
                <p class = "text-center">
                    <a href = "#" class = "btn btn-template-transparent-black btn-lg">Get Some</a>
                </p>
            </div>

        </div>
    </div>
</section>

Вот мой CSS:

.bar.background-image-fixed-2 {
  background-image: url('../img/fixed-background-2.jpg'); 
  background-position: center center;
  background-repeat no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

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

Фактический вид (неверный):

Ожидаемый вид (который я получаю за несколько секунд до того, как он изменится автоматически):

Редактировать:

Вот рабочий пример (хотя в нем отсутствует какой-то javascript, поэтому это будет выглядеть забавно).