• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

Website Issue - Looking for Feedback

Question

M_Lyons10    454

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.

Share this post


Link to post
Share on other sites

6 answers to this question

Recommended Posts

  • 0
+John.    1,395

@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

 

  • Like 1

Share this post


Link to post
Share on other sites
  • 0
M_Lyons10    454
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.

Share this post


Link to post
Share on other sites
  • 0
BinaryData    777
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.

Share this post


Link to post
Share on other sites
  • 0
+John.    1,395

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.

 

 

Share this post


Link to post
Share on other sites
  • 0
+John.    1,395

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

Share this post


Link to post
Share on other sites
  • 0
M_Lyons10    454

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.

 (436).png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.