Full-width parallax images not showing up only in Google Chrome

[Tecknologikal]

Hey there everyone! So I’m in the process of making a site for a local band, and I’m having some trouble with rendering my full-width parallax images. They’re working in every browser EXCEPT Google Chrome!

I’ve already tried removing AdBlocker, clearing my cache, etc., but nothing seems to work as of yet. Is anyone else having this problem / know how to fix it?

Here’s the SASS for one of the images in question (both images have the same SASS code):

.full-width-image2 {
  width: 100vw;
  min-height: 100vh;
  background: url("../../assets/img/jandp-2blue.jpg") fixed;
  background-size: cover;
  background-position: center;

  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}

The URL is jamesandparishioners.com

Thanks in advance for the help!

[Tecknologikal]

Here’s an update: I still don’t know why these images aren’t showing up, but little bits of the images show up if you click and drag your mouse over where the images are SUPPOSED to be. I’ve been searching the web like crazy to try and figure out what the problem is, but I absolutely can’t find anything!

[Shikkediel]

It’s not showing in Firefox for me either. Says the image is corrupted. Try and upload it again maybe.

Edit – no trouble with Chrome here.

[Tecknologikal]

That’s really odd–it’s showing up in Firefox for me, but still nothing in Chrome.

I re-uploaded the images but I still can’t see them in Chrome. Maybe I still need to take some time for the changes to propagate or something.

On another note, where did you see that the image was corrupted? I can’t find any sort of error message anywhere.

[Shikkediel]

It’s now showing in Firefox (and all other browsers), Windows 7. I got the message when I visited the image url directly, “this image cannot be displayed because it contains errors”.

Caching seems more likely than propagation. Have you tried a CTRL+F5?

[Tecknologikal]

I’ve tried clearing my cache and even going into incognito mode, and the pictures still don’t show up.

It’s really weird, the images don’t show up until I highlight the wording on top of them, and then a little bit of the image shows up when the words are highlighted. They also don’t scroll with the parallax effect on Chrome either.

I’m running macOS Sierra (10.12) on my machine with Chrome, so maybe that’s a problem?

[Tecknologikal]

Ah, I figured it out! I had a style in my CSS that was overriding the image for some reason. I took that out, and now everything works like a charm. Thanks for all the help!

[Author]

Posts