CSS Parallax - Starting Point in FireFox vs Chrome/Safari

Hey Guys,

Trying to wrap my mind around what is going on here on my page…

http://modocom.ca/modo-update/

On FireFox everything works and starts off correctly. But on Chrome and Safari not sure about IE maybe someone can take a look at it for me the parallax images all start in different points. I believe this has to do with some of the CSS but not sure how to get it to show up correctly across all browsers.

When I open the files on my desktop not on the online host in Chrome/Safari they work fine so it is becoming frustrated why it is doing this.

Now if I go into Chrome/Safari and just grab corner of my browser window to resize just a hair then it all scrolls properly but once I refresh its back to not working correctly. Any reasons why this is acting like this?

One other thing in Safari when scrolling sometimes the navigation disappears.

Thanks,

Mike

One other question as I want to put this into the page. I used icons to create this as you can see is it possible using CSS so when you rollover the whole div containing each icon that the animation goes all at once so someone just has to rollover one of the letters and the background color will change on all letters all at once and the outer div containing all the icons/letter will click somewhere instead of all letters.

Heres the link for where I am at right now with it…

http://modocom.ca/logo/

Thanks,

Mike

Hello,

Anyone get a chance to take a look at this at all.

Especially the second comment with the…

http://modocom.ca/logo/

Thanks,

Mike

HI,

I did take a quick look yesterday but I couldn’t see that Chrome was any different to Firefox so you will need to make it easier for use to see what you mean. (Screenshots of the different behaviours perhaps).

Chrome is often buggy at redrawing especially in complicated pages like yours so it may be something that you will need to narrow right down by creating a bare bones page and testing from scratch to see what Chrome doesn’t like. ( Iv’e noticed that Chrome will often fail with re-applying media queries when the page is widened when main containers are created with inline-block or floats - but only happens in some cases.)

Regarding the logo then you lost me with your explanation of what you want to happen :slight_smile: I think I need pictures.

Hi Paul,

I got the logo thing fixed this morning.

The parallax I’ll attach show screenshots to show what I mean, the Lift+ and the Gillons are the only one which correctly show up the same in both FireFox and Chrome the rest are way off when fully in browser. FireFox shows correctly and funny thing is if you open the files offline from the desktop in Chrome they show up correctly but when on the web files open totally different…

FireFox

Chrome

So I think has to do with starting point somewhere in the CSS but not quite sure.

Hopefully can dig down into the issue to see whats going on.

Hi,

I still can’t see any difference between Firefox and Chrome (PC). They look the same to me like the first set of screenshots.

Have you cleared your cache in case you have some old versions stuck somewhere in the cache or corrupted?

Perhaps someone else can have a look and see if they see a difference?

I hope someone can took a look I tried on my Chrome at home and sometimes works correctly, sometimes doesnt. Anyone see these issues?

Can anyone else see the same issue I’m having? Seems like difficult one to solve.

Typical for these, this is what I get with no javascript - #lmi does not redirect to #info

with javascript and css it’s off position (the blue and boat should be higher) - it does redirect though

with javascript and no CSS I can’t scroll to the bottom for some reason

Other than no img alts and non-standard attribute errors this one might be in play

Error Line 258, Column 4: No p element in scope but a p end tag seen.

</p>

Ah, hah! After reading Allan’s post, I opened Mike’s site again in Firefox. The boat is underwater and never surfaces! The good news is that the bug is not exclusive to Chrome. The bad news, of course, is that it is intermittent. :stuck_out_tongue:

EDIT: I launched FireBug and the layout cleared up immediately.

…continued from previous post.

Likewise, resizing the height of the browser clears the problem immediately.

Where did you get the parallax script from Mike? Maybe check the authors site and see if the issues are the same there.

I have seen a number of comments around the web about issues with parallax scrolling in Chrome - but no fixes as such.