Parallax & Chrome - They don't like each other (when cloudflare is around) [SOLVED]


(Chris french) #1

:frowning2:

Im almost at the end of this project and it appears that Parallax & Chrome as it stands is not working that well.

You either have to resize the screen manually or refresh the page a few times.

Can anyone shed some light on the matter as this is a big must-have the project.

Help would be rewarded with High 5’s


(Dan) #2

What is this parallax you speak of? Is it the Parallax stack from @joeworkman?

Also a link to the live webpage showing the problem always helps.


(Chris french) #3

A 1000 Apologies. You are of course correct.

The stack i’m using is Parallax by JoeWorkman

and this is what’s happening on chrome. Safari & IE is fine.

You can see that this image has stopped half way down the page.

But as soon as you refresh or resize the window all is good.


(Dan) #4

@joeworkman have you seen this issue before?

@Chrisfrench also, a link to the live site or an example project showing the issue would help.


(Joe Workman) #5

Hard to say without a URL…


(Chris french) #7

http://www.echospace.co.uk/auth01/travel2next/
Please use Chrome to view it though


(Andrew Tavernor) #8

This looks very much to me like a problem many people have had with fixed backgrounds (of which parallax is one).

The webkit installation on your machine seems to get broken by certain plugins added to Chrome. The result is that anything you publish from that machine will do as you describe with fixed backgrounds.

I must stress that this problem occurs due to the installation on the machine from which the page is published but is manifested for all viewers… The same project file will work when published from another, unaffected machine.

Firstly, test if this is the case by publishing a simple page without parallax but containing a fixed background image using a stack such as Joes Jack or my Sections stack. Make sure that the fixed image is far enough down the page so that all of it is not within the viewport on page load.

Look at the resulting page in Chrome - does it suffer the same problem? If so, you will notice that any part of the image not in the viewport at load will not be displayed until you re-size the browser.

This happens because Chrome tries to save power by ignoring fixed image processing for areas that are not in the viewport. Clearly the problem above means that this is not working correctly.

If you verify that this is indeed the problem there are two possible solutions:

  1. Uninstall Chrome and all its plugins completely from your machine. Restart and re-install Chrome.
  • This has worked for about 50% of people.
  1. Re-install OSX from the Apple combo update. (You will not loose any data - although obviously back up first anyway)
  • This has worked for 100% of people where option 1 did not resolve the problem
    Here is the link to the 10.11.3 combo update - you may of course need a different one depending on your current OSX version. https://support.apple.com/kb/DL1859?locale=en_US

(Andrew Tavernor) #9

Here are a couple of G+ threads where people had the problem (assuming this is responsible).

The first fixed worked for these people:

This one required the combo update


(Chris french) #10

Well @tav you’ve gone and done it. I deleted chrome republished the lot and then tried it on another machine on Chrome… BANG it’s all good.

This is just for you. You’ve earnt it

p.s when i say just for you i actually mean that this goes out to all weavers really so apologies @tav


(Andrew Tavernor) #11

@Chrisfrench :slight_smile: Excellent - glad to be of help.


(Andrew Tavernor) #12

@Chrisfrench You might want to mark this post a solved, it is always useful for others when looking in the history.


(Chris french) #13

In short people this was the problem:

  • A Parallax image background was only showing half way up the screen on Chrome browsers

  • When you refreshed the page or resized the window it popped into place, as it should.

  • TO FIX: I was given the advice to uninstall Chrome from my machine. Republish the whole site

  • This when i checked on my wife’s PC with Chrome fixed the issue.


(Nik Fletcher) #14

The code generated by a RW site is completely unrelated to the installation of WebKit or Chrome on a Mac.

—N


(Chris french) #15

Sorry @tav this didn’t work I thought it did but I did some tests on another machine and the problem is still there.

So we’re back to square 1 I am afraid


(Andrew Tavernor) #16

I know this ( apologies for the over simplification) and I know that it doesn’t make sense but we have had well over 30 users who have experienced this problem over the past 6 months. In each case either a Chrome re-install or a combo update has fixed it.

I myself had an affected machine. Joe and I did comparative tests exporting the exact same file from different machines, one suffered the fixed background problems, one didn’t. We never really got to the bottom of what caused it but found a solution for users which has worked in all cases eventually. We even swapped local exported files and diff’ed them revealing no difference. One worked when uploaded via ftp, one didn’t - regardless of the server used.

I can understand how an OSX reinstall can fix potential problems with exporting but in fact almost all users have instantly fixed the problem with just a Chrome wipe and re-install. Again, I know this is anecdotal but the number of people for whom it has worked for point to some validity.

@Chrisfrench The easy way to tell if this is the problem would be to send a simple project to either myself or Joes support emails and we can publish it. If this works then we know the problem is localised to your machine. It may well be that there is some other issue but this exact thing has happened so many times that it seemed like the most probable cause of your problems.


(Elliot Jackson) #17

Hey @Chrisfrench,

Just jumping in here to say that I can replicate the issue you’re seeing in Chrome 48.0.2564.116 as well as Firefox 45.0. Whilst the background does load full screen in Safari 9.1, I am not seeing any kind of parallax effect on the page (or any of the other pages)—nor am I seeing it once I have resized the window in any of the other browsers.

The top value is being changed on .parallax-mirror and the translate3D value is being changed on .parallax-slider when I scroll but that isn’t doing anything visible on the page. What I’m seeing at the moment in all browsers just looks like a background image set to cover on the body (though it isn’t).

Cheers,
—E


(Robert Ziebol 🖖🏼) #18

OK so @Chrisfrench sent in a ticket with a project file, which I published here:
http://www.zeebedesigns.com/par-chrome/
Works brilliantly on my machine and Chrome here. Could @Chrisfrench publish that same page to his server so we can see it?

BTW, this link
http://www.echospace.co.uk/auth01/travel2next/
does not work in ANY browser for me, the background image just jumps up and down.

Also, here is a video of it working for me on my system in Chrome


(Dan) #19

Turns out it was CloudFlare.

CloudFlare inserts this after the head…

Disabling CloudFlare fixes the Chrome issue.

@tav Never suggest to someone to re-install chrome or OSX because something isn’t rendering correctly in the browser. FYI: That’s never the fix :wink:


(Chris french) #20

Yes, it turned out all along it was those guys at CloudFlare.

Thank you to @tav @zeebe @ElliotEKJ @nikf @joeworkman and, of course a big boy pants thank you to @dan

This is why THIS forum is the greatest you can ask for help and everyone joins in. If I can return the favour in anyway, let me know. I’ll be chipping in when I can.


(Robert Ziebol 🖖🏼) #21

Have to actually agree with @tav, I have seen reinstalling Chrome fix the chrome render issue many times, just this time it was more than just a Chrome render issue.