Website Issue - Looking for Feedback

[M_Lyons10]

Hi everyone.

 

We launched a new website a little while back and it ran very smoothly and we had no issues.  Recently, with the latest update to Chrome, the content on our main page keeps shifting down and then up as the transitions occur in the slideshow.  This ONLY happens in Chrome, and did not occur prior to the most recent update.  I can't seem to figure out a way to solve this, and I'm honestly not sure if it is genuinely an issue with Chrome's rendering (Which I'm unlikely to get Google to fix if it is), or something that I should have accounted for.

 

I was hoping to get some thoughts from members that may know more than I...

 

Our website address is www.disasterblaster.com

 

Thank you for any help provided.

[+John. Subscriber¹]

@M_Lyons10 Hi, add the following to your image banner styles:

 

-webkit-transform: translateZ(0);

 

e.g. so the following 

 

<div style="position: absolute; z-index: 0; left: 0px; top: 0px; width: 100%; height: 100%; display: none; background-image: url("images/slide_radon.jpg"); background-size: cover; background-position: 50% 50%;">

 

becomes

 

<div style="position: absolute; z-index: 0; left: 0px; top: 0px; width: 100%; height: 100%; display: none; background-image: url("images/slide_radon.jpg"); background-size: cover; background-position: 50% 50%; -webkit-transform: translateZ(0);">

 

Let me know how that goes

 

[M_Lyons10]

37 minutes ago, John. said:

@M_Lyons10 Hi, add the following to your image banner styles:

 

-webkit-transform: translateZ(0);

 

e.g. so the following 

 

<div style="position: absolute; z-index: 0; left: 0px; top: 0px; width: 100%; height: 100%; display: none; background-image: url("images/slide_radon.jpg"); background-size: cover; background-position: 50% 50%;">

 

becomes

 

<div style="position: absolute; z-index: 0; left: 0px; top: 0px; width: 100%; height: 100%; display: none; background-image: url("images/slide_radon.jpg"); background-size: cover; background-position: 50% 50%; -webkit-transform: translateZ(0);">

 

Let me know how that goes

 

Hi,

 

I'm sorry, do you mean in my main.js file?  I did make the change as suggested in this file and the boxes are still shifting.  I just wanted to make sure that I understood your post and did what was suggested.  The line you are referencing, which does show in Chrome > Inspect is generated from this main.js file.

 

Here is the code from the main.js file including this change:

                // Build slides and add them to target
                    for (i in src) {

                        if (!src.hasOwnProperty(i))
                            continue;

                        x = $('<div></div>');

                        x
                            .css('position', 'absolute')
                            .css('z-index', zIndex - 1)
                            .css('left', 0)
                            .css('top', 0)
                            .css('width', '100%')
                            .css('height', '100%')
                            .css('background-position', src.position)
                            .css('background-image', 'url("' + i + '")')
                            .css('background-size', 'cover')
                            .css('-webkit-transform', 'translateZ(0)')
                            .hide();

                        x.appendTo($slider);

                        a.push({
                            slide: x,
                            caption1: src.caption1,
                            caption2: src.caption2
                        });

                        // Set initial captions.
                            if (n == 0) {
                                caption1.html(src.caption1);
                                caption2.html(src.caption2);
                            }

                        n++;

                    }

Which in Chrome > Inspect looks like:

<div style="position: absolute; z-index: 1; left: 0px; top: 0px; width: 100%; height: 100%; transform: translateZ(0px); display: block; opacity: 0.910425; background-image: url(&quot;images/slide_fire.jpg&quot;); background-size: cover; background-position: 50% 50%;"></div>

 

Thank you very much for your help.

[BinaryData]

Just now, M_Lyons10 said:

Hi,

 

I'm sorry, do you mean in my main.js file?  I did make the change as suggested in this file and the boxes are still shifting.  I just wanted to make sure that I understood your post and did what was suggested.  The line you are referencing, which does show in Chrome > Inspect is generated from this main.js file.

 

Here is the code from the main.js file including this change:

                // Build slides and add them to target
                    for (i in src) {

                        if (!src.hasOwnProperty(i))
                            continue;

                        x = $('<div></div>');

                        x
                            .css('position', 'absolute')
                            .css('z-index', zIndex - 1)
                            .css('left', 0)
                            .css('top', 0)
                            .css('width', '100%')
                            .css('height', '100%')
                            .css('background-position', src.position)
                            .css('background-image', 'url("' + i + '")')
                            .css('background-size', 'cover')
                            .css('-webkit-transform', 'translateZ(0)')
                            .hide();

                        x.appendTo($slider);

                        a.push({
                            slide: x,
                            caption1: src.caption1,
                            caption2: src.caption2
                        });

                        // Set initial captions.
                            if (n == 0) {
                                caption1.html(src.caption1);
                                caption2.html(src.caption2);
                            }

                        n++;

                    }

Which in Chrome > Inspect looks like:

<div style="position: absolute; z-index: 1; left: 0px; top: 0px; width: 100%; height: 100%; transform: translateZ(0px); display: block; opacity: 0.910425; background-image: url(&quot;images/slide_fire.jpg&quot;); background-size: cover; background-position: 50% 50%;"></div>

 

Thank you very much for your help.

I believe he means your .css file.

[+John. Subscriber¹]

Sorry, yes the .css, whichever file you are defining the properties for the images on your banner. 

 

I can only see what Chrome generates so I don't know whereabouts on your website it would call from.

 

 

[+John. Subscriber¹]

Hi, was this sorted or do you need any more help? 

[M_Lyons10]

Sorry, I had to look into it to make sure that I was putting this in the right place  (And was doing other trouble shooting as well).  The .css doesn't handle the slideshow, that is handled within the main.js file.  So I wanted to confirm that I was following your recommendations correctly.  I did double check the .css file to make sure that there were no style settings for the slideshow and there are not.

 

Unfortunately, with that change (Which does carry through to the code visible when the site is running in Chrome > Inspect), the boxes are still shifting down when tested locally.  I have not uploaded this change to my website yet, as the issue is still occurring.

 

I really appreciate your help and suggestions.  I would really like to fix this, but it doesn't make any sense.  

Another recommendation I received, to remove height: auto from the .css here:

 

  .homepage #header-wrapper {
    height: auto; }

 

Did solve the problem of shifting the boxes down, but it also shrunk the header image (picture attached), which definitely isn't ideal.  The text from the slideshow stayed in place though...

I also noticed that a couple of the images for the slideshow were different sizes, and while that shouldn't affect anything suddenly like this, I figured I would resize them all to the same size to test that out.  This also didn't work.