September 12, 2012 at 4:00 am #16235
When I load my portfolio pages in Google Chrome, the page first loads the portfolio items, and then the footer sporadically jumps up and slides back down to it’s original position. It makes the page look choppy and I’m wondering if anyone knows a fix to this issue.
BenSeptember 13, 2012 at 1:50 pm #90704September 13, 2012 at 3:47 pm #90705
I noticed that the jumping doesn’t occur on the initial page load, but once you reload the page it jumps. Here is my URL: http://benslepp.com/September 14, 2012 at 6:40 pm #90706
The footer is causing the problem since for a split second it appears and then ‘falls down’. How have you modified the template itself (footer.php)? Because this doesn’t happen with my version. Can you add the original footer.php which came with the theme, and see if the problem is fixed?
NickSeptember 15, 2012 at 5:17 am #90707
Thanks for the response!
The only modifications that I have made to the footer have been through the Appearance > Widgets menu where I have added/subtracted and modified the menu options in the footer. I tried rearranging the widgets a bit and resetting it back to default. I also tried replacing the footer.php file just in case. Both fixes were to no avail.September 16, 2012 at 5:59 pm #90708
Not sure if this is going to work but can you try to put this on your custom.css
I think the jump is caused by the AJAX portfolio, again, not sure. Anyway, it is really not a problem IMO.
IsmaelSeptember 17, 2012 at 1:43 pm #90709
Please add more portfolio items and make sure at least 2 of them are in different categories.
NickSeptember 18, 2012 at 2:59 am #90710
I added the code for the custom.css and it worked for one portfolio item. It still jumped a few pixels but it was barely noticeable. I tried a separate test where I added extra portfolio items to see if that would fix it as well. I added about 4 items in about 5 different categories with some overlaps. Adding new items didn’t fix it, matter of fact it made it worse. It started jumping vertically and now it jumps horizontally as well.
When I added the custom.css again it actually stopped jumping vertically but still jumps horizontally.
I also tried to add:
I was hoping it would produce the same fix in width instead of height. It had no effect, but we are getting somewhere.September 18, 2012 at 9:13 am #90711
I visited your site again and reload it. I don’t see any jump at all, just a few pixels after the portfolio loads. All looks fine. What do you need a min-width for?
IsmaelSeptember 18, 2012 at 3:15 pm #90712
Basically, the page jumps randomly and if you only load it once you might not catch it. Try loading the page a few times.
What happened before was that the page would load everything perfectly fine and then all of a sudden the footer would come back up past the portfolio items and drop back down. Now the problem is not involving the footer. Once the page loads everything looks fine for a second and then the portfolio items collapse in and then expand out again.
I looked at your Angular Live-Preview website and this problem doesn’t occur there at all, I tried reloading it 20 times just to make sure. It seems like the AJAX effects for making things slide across the screen is just executing at the wrong time. Instead of Executing Animations and then Loading Content, it is erroneously Loading Content first and then Executing Animations.
I thought making a min-width value would stop it from expanding horizontally since min-height worked for the footer.September 18, 2012 at 3:22 pm #90713
I’m not getting the jump under any circumstances now. Did some tests in FF, Chrome and even IE.
DevinSeptember 18, 2012 at 3:32 pm #90714
I tried a similar test, cleared the cache in all browsers, and there was no problem with Firefox or IE. In Google Chrome I still have the jump effect and I tested this on three different computers.
If worse comes to worst, I can even record it on video if that could help in any way.
BenSeptember 18, 2012 at 5:54 pm #90715
Now that there are items in the portfolio I no longer get a ‘jump’ on my screen as before. I am at size 1360 width screen on laptop with Chrome. Take a look https://docs.google.com/file/d/0B8hqGBMSfHtKbGpEQ2NrWFlxMnc/edit . There is at second 3 of the video an event when the portfolio is loaded and then disappears for a split second and reappears fully loaded. I will pass the video with this thread to Kriesi to take a look at. Thanks for pointing this out.
NickSeptember 18, 2012 at 6:32 pm #90716
Thanks for getting a video of it and for passing it on to Kriesi. I think it was just a simple misunderstanding then, because I meant that the portfolio loading a second time with the animation was the “jump” (the one at 3 seconds). Definitely a different one from the original problem.
BenSeptember 20, 2012 at 10:01 pm #90717
I’m still not getting the original jump that you were speaking of Ben but the one Nick has in the video is (i believe) intentional and just what happens when everything is fully loaded in. At least, it has been that way for as long as I remember and behaves the same in the demo(s) for me.
DevinSeptember 21, 2012 at 4:45 am #90718
These are all websites using angular that don’t have this problem:
One site has a similar effect where the portfolio sections slide in, but it still slides in before they are all loaded, it is much less obvious, and it is from bottom to top not left to right: http://www.benrobins.com/
Even the live preview doesn’t have this effect: http://www.kriesi.at/themedemo/?theme=angular
If there is in fact some kind of animation that happens in every single one of these websites, a sliding animation of sorts, then it is very very subtle. My sliding animation is not subtle at all, and instead it is very obvious and quite startling in my opinion.
If you guys can think of anything that might help to disable this animation or change it’s timing, I would be very grateful.
BenSeptember 24, 2012 at 5:37 pm #90719
I looked at the example url’s you provided and that effect is present but perhaps one time in twenty.
The biggest difference I noticed between your site and the half dozen urls, is that none of them use the 3 column portfolio layout. This is right now the only lead.
Would you mind conducting this test. Create a completely new portfolio, with completely new images and categories. Make it 4 columns and add 4 items to it. See if there is a difference. Perhaps this is something specific to a three column layout.
NickDecember 3, 2012 at 6:39 am #90720
I recently had time to test out a completely new version of the portfolio. I recreated the portfolio from scratch and used the 4 column layout instead of the 3 column layout as requested. I kept everything at the stock settings, no changes except the addition of portfolio images. I still had the jumping effect problem.
However, the problem has gone away now that I have a lot of portfolio elements on the page. I have reloaded it again and again and it doesn’t come back. When I make a page with only a few portfolio items on it, the problem comes back.
Things are running fine for now luckily, but if I have the problem again in some form, I will contact you guys again.
Thanks for your help,
The topic ‘Portfolio Pages are "Jumping"’ is closed to new replies.