Page scroll menu not working Firefox and Chrome - javascript

I have created my first microsite with Umbraco/ASP.NET at www.surreyhillsmt.co.uk. I started with a bootstrap theme called Agency from startbootstrap.com, and find that the smooth page scrolling from my menu works on the Edge browser and both Safari and Firefox on an iPhone/iPad.
However, smooth page scrolling does not work on either Firefox or Chrome on a PC (fully updated Windows 10, and both Firefox and Chrome installed within last couple of days). This problem is not exhibited by the static bootstrap theme that I used.
I would really appreciate any help. By way of background I am competent with C# and okay with HTML/CSS. I have zero knowledge of javascript and the like.

This is no longer a problem. Oddly this was fixed with the passage of time. I guess it was a caching related issue.

Related

fullpage.js in wordpress: scroll-up messes up content position on mobile

I am using fullpage.js with the "fullpane" theme on my wordpress.
When I open the site on my phone and scroll down, everything looks good and the content containers are where they are supposed to be.
BUT when I scroll up, the position of the content containers is being messed up and they are positioned much higher.
I was able to replicate the problem with multiple browsers (Chrome, Firefox) on Android and iOS and multiple phones.
Interestingly, the problem doesn't persist when I try it in the mobile view of Chrome developer tools.
Thanks in advance for any advice!
Update: I refunded the wordpress theme above and created my own theme.

Website loading times out, images are missing, load half-way, and sometimes appear in wrong places

I've ran into this very peculiar issue where the wordpress website I am working on (Click to see) , looks and works great on all browsers except Safari on iPhone.
The site seems to be loading and times out half way. Sometimes images appear in wrong places, sometimes they're cut off mid-image. We've tested the site on OSX, Windows, in Chrome, Safari, Firefox, and iOS Chrome and it appears to be working great. The interesting thing is that this problem seems to be exclusive to Mobile Safari, consistently across multiple devices from different networks.
Here's are a few examples of what we're seeing:
In this photo should be a background image and a menu icon in the nav.
And in this photo what is that image doing in there? There should be another logo and these should be scrolling right to left instead of being displayed vertically.
And in this one Some images don't load at all and some don't load all the way.
And also in this one same portion of the website as above, except nice and crisp, how it should look. This was using iOS Chrome.
We tried isolating the issue by switching over to the default Twenty Fifteen wordpress theme, where we created an image heavy blog post (without any widgets), and the issue persisted.
We've been clearing browser caches and using W3 Total Cache to clear WP cache, but no luck.
Also had the website host, Namecheap, reset the server configs, just in case that would solve the issue, but, alas, no luck either.
Has anyone run into this bizarre issue in the past? Any ideas what else we could try?
Thank you so much in advance!

Prevent page jumping on OSX Chrome using bootstrap modal

I am using Twitter's Bootstrap 3 modal, and it looks great, except on google chrome (perhaps other broswers too) on OSX, the page underneath jumps left a little bit - probably due to a scrollbar taking some space on the right.
Is there any way to prevent the page jumping when using modal windows on OSX Chrome?
I literally just fixed this problem on my project.
Put this line of code in your css:
body.modal-open {
margin: 0 !important;
}
If the above fix doesn't work for any future readers (as it didn't for me), here's a whole thread detailing potential fixes. Looks like it will be addressed permanently in the next Bootstrap release.

Google Chrome background jittering when moving pictures

I was working on an image gallery and it involved some heavy image moving\resizing using javascript. Everything worked like a charm on all the broswers except for IE6\7 (no wonder) and ... Google Chrome.
Basically under certain zooming each movement made Chrome redraw the background, making it jitter, change its position and then move back. I can't post link to the actual script at the moment, but I used a jquery plugin to immitate the problem:
http://danilsk.narod.ru/wtf.html (try zooming in and out and clicking images)
Does anyone know how to fight this?
I am using google chrome and I see no issue here.
Everything is running very smoothly. Try updating your browser.
FYI:
Ubuntu 10.04 LTS - the Lucid Lynx
Google Chrome 8.0.552.215

Smooth Page Resizing in Firefox with jQuery After Hiding Element

In my web application I frequently have sections that need to be collapsed/expanded. I do this with jQuery using the slideDown() and slideUp() methods. They work great. However, in Firefox, if I am scrolled all the way to the bottom of the screen and I collapse a div the screen stutters and flashes as the div disappears and the page is automatically resized by the loss of the element.
Has anyone run into this problem before? I've been working around it by setting a min-height with a generous amount of space for any section that will be collapsible but this seems like an unnecessary solution. Chrome doesn't have this problem and, amazingly, neither does Internet Explorer, both of which smoothly resize the page without any sort of stutter or flashing.
I'm using Firefox 3.6 on Ubuntu and I've experienced this problem on earlier versions as well. I have not tested on Firefox 4.
I have ran into this problem before and yes. I have worked around this by setting a mini-height or consider not using a slide effect.

Categories

Resources