Background-size: cover cut-off when first loaded, then snaps into place

[brooklynartist10]

So I’m having a little issue with site I’m developing for a client. It seems that on my client’s home computer, every time he is on the site’s homepage (http://integratedwc.com), the top of the banner images are cut off slightly on the top. But when he starts to move the scrollbar, the image jumps down into place. He’s using the most recent Chrome browser on a Windows 10 PC so I thought maybe it was just a specific to that combination. But then I was able to recreate it on my Mac (El Capitan OS) in both Chrome and Safari after resizing my browser window to shorter size (height). Firefox doesn’t exhibit this particular problem, though, and displays the images fine upon loading.

Here is a screen shot of the cutoff image:

And then, if I move the scroll bar just a tiny bit or grab the bottom corner of the browser window to resize it, the image snaps down into place:

Again, this happens in Chrome and Safari. In Firefox the image displays well and doesn’t move abruptly (just grows and shrinks responsively as normal).

Is there a fix for this?

[Mittineague]

I notice that even the “OK” still isn’t showing the top of the image.

It doesn’t show until the hamburger menu kicks in.

I guess what ever styles you have for that view should be applied to the others?

[PaulOB]

@brooklynartist10

http://integratedwc.com

Hi,

Firstly I should point out that I’m not seeing any cut off in Windows 10 on chrome but there are some things I don’t like about your header and image setup.

First of all you are using magic numbers to create the space at the top via padding top on the body and then negative top margins on the big image. This would be hard to maintain should things change in the future and you would need to match all dimensions to the new content.

I would instead remove the padding top from the body element and then place the header without absolute positioning and let it take up the flow naturally. Just let its content dictate the height which you will be able to make similar to the existing design with just content + some padding top and bottom to give it room. Don’t move it with relative positioning as that is just something else to go wrong.

Your large image could then just follow naturally without the need for the negative top margin which takes another possible cause out of the equation. I find that when things follow logically and easily they more often than not work without problems.

Having said all that it may indeed be nothing to do with the above and just a glitch in certain versions of chrome. There is a ubiquitous fix for chrome but I don’t like adding it willy nilly because in some circumstances it can cause other problems. You can try if you want and see if it fixes the problem and if not then remove it

Add -webkit-backface-visibility:hidden to #banner to enable a different rendering algorithm which can often fix glitches in layout.

As I said it may not help at all but worth a try.