Parallax issues

When I move the mouse over the bg image the image disappears and doesn‘t appear again until I refresh the Browser.

Works fine here. Very nicely done site.

I don’t use lazy load as it creates other issues.

Thanks Rob!

I have the same problem.

Parallax is working during preview on Blocs but not working on Chrome or Safari

Do you have a live version I can test, Im still unable to replicate this issue. What version of MacOS are you running?

Yes, the site’s here. On the home page, it’s supposed to have parallax scrolling.

I’m using MacOS 10.13.4 (17E199). I tried on a Windows PC, using Chrome and it worked although there were times when I scroll that the background image would disappear then show up when I scroll again.

It was working 1 or 2 weeks ago. Some time last week I updated to the latest version of Blocs. I have tried going back to the old version but parallax still doesn’t work.

The flashing is lazyload, the fact it works on a pc minus the flashing (which is lazy load) I think this may be a MacOS issue. Since updating to the lastest public MacOS my laptop screen is flickering even on desktop sometimes.

@Norm Same here. After I did a major update of Blocs, my parallax stopped working. The parallax preview in blocs works fine, but once I export it it does not work in safari, chrome or firefox. I haven’t done an update to my computer. This happened after I updated Blocs.

Hey! Does any one find out how to fix this? Im having the same problem on blocs 2 and blocs 3 :confused:

I now have this issue on a MacBook using Mojave 10.14.3 and safari as well as on Windows 10 machine with both edge and IE… However, it works fine on another iMac running Mojave 10.14.3. The strange thing while creating this website it first work fine (parallax) on all machines… I am using Blocs 3.1. Also, it works fine on Blocs preview on the MacBook but not using browse using Safari???

I have cleared website data as well as rebooted machines but still same result.

Any figure out how to fix this?

Update:
Not sure what fixed this, but it is all woking again… Did not make any more changes…

I just want to bring up the parallax issue again. My project uses parallax on the homepage, but parallax is only working on my iMac. As long as I’m in the blocs editing mode, I can see the parallax effect at all screen sizes. When I switch to the preview mode, the parallax is gone on my Macbook Pro. I made several tests with different devices (iPad, iPhone, Macbook, iMac) but parallax is only working at the largest screen size of the iMac. If I use the slider on the iMac and reduce the window size, or if I choose a smaller breakpoint, the parallax is also gone on the iMac. For me it seems that parallax is only working at the largest breakpoint at the moment. I also tested with Safari, Chrome and Firefox with the same result (also tested after exporting my project to harddisk).
Is this a failure of blocs or bootstrap? What can I do to get parallax also at other breakpoints?

Generally, parallax effects do not work well on mobile devices (tablets and smartphones). The code can be tweaked to make the effects work, but it isn’t recommended. The added code can cause performance issues and may even crash a mobile browser. When you adjust your browser window to a breakpoint designed for tablet or mobile, the browser will switch to a different version of your site that has been designed for that particular breakpoint. In other words, the parallax effect will be turned off. The same thing happens with video backgrounds. Once you reach a mobile-specific breakpoint, a video background will not display - you have to use a static image as a fall-back - Blocs allows you to add such an image.

This isn’t a failure of any particular web development application - its just a common sense precaution that ensures you are delivering an efficient website that minimises the viewer’s bandwidth and doesn’t over stress mobile browsers. The fact that you see the loss of parallax on your iMac when adjusting the window size is simply the browser pulling up the version of the site best suited for the breakpoint.

1 Like

I understand the problem for mobile devices, but with the current settings even my MacBook Pro 2014 does not show the parallax :frowning_face:. I just want to use it for the header of the first page as it looks better with the parallax effect. Otherwise we can go back to plain text websites as all graphical effects and even images have an influence on the processor and battery lifetime of mobile devices. Most of the people play games on their mobile devices which need much more battery power than a parallax effect on a website…

There is no obvious reason why your MacBook shouldn’t be showing the effect. Maybe you could post a link to your page so others can check for you. Meanwhile, there are a few things you can do to attempt to identify the problems. First and foremost, clear your browser cache. next, try in a different browser and be sure to empty the cache of that browser also. Next, turn off all extensions that you may have installed in your browser. If the effect works, start turning the extensions back on again until it stops working again - this will identify if a browser extension is conflicting somehow. Finally, check that your OS and browser are up to date. It may also be advisable to check out some other sites that use parallax scrolling effects - do they work?

I think, as a general rule, Blocs is okay but flakey in some areas.

Unfortunately for me (!) the two areas where it’s flakiest are the things I wanted to do.

A) Parallax - I abandoned it as there was no way to ensure that the website worked with all breakpoints - it’s a while ago now, but as I recall an iPad landscape was okay, but in portrait not.

Also, that old thing about it not working on mobiles, rubbish, I’ve seen some very smooth parallaxes on my iPhone, I expect they just weren’t made with Blocs.

So on Blocs, parallax is only half an offering, I had to make special pages for mobile devices which was just too much hassle.

B) Toggling Blocs - on desktops hidden blocs load hidden i.e. toggled closed. On mobile devices, hidden blocs load open. I had a support token or two open with @Norm and he didn’t seem able to solve it. Thankfully @rusmir came to the rescue with a means of toggling rows instead.

Problem solved, but yet another rebuild to overcome Blocs’ shortcomings.

Even now I’m having to use Blocs 2 as “smooth toggling” doesn’t work in Blocs 3. Something to do with Bootstraps 3 versus 4, apparently.

Another compromise.

This is the current iteration of my website, not what I wanted, but what is possible with Blocs 2.

I should add that I’m a non-coder!

Re what I said above about “parallax not working on mobiles” being rubbish, here’s one I just came across today:

Little Boots

I think your assertion that “parallax not working on mobiles” being “rubbish” is a little harsh. As I said in my original reply, it can be done but it isn’t recommended. Just looking at your example site on an android phone shows that these effects can place quite a strain on a mobile OS. The site took some time to load and become functional. The Tour section of the site remains as plain black with no information other than the section title and when scrolling to the foot of the home page, there is a remnant of the background image showing below the footer (of course, that could simply be bad design). Ultimately, creating sites that work on mobiles should be about minimising user resources and giving people the information they are looking for in the most efficient way possible. Whilst it would be nice to have a mobile site do everything that a desktop site does, the fact remains that mobiles are usually working on capped bandwidth and the most responsible thing a web designer can do is ensure that we are not stealing that bandwidth for the sake of vanity.

2 Likes

Sure it works, the site isn´t responive :stuck_out_tongue_winking_eye:

1 Like

“Responsive”?