Website Displaying In Different Browsers

I have been using Chrome to build the website but upon checking it in Edge, Internet Explorer 11 and Firefox, I notice it isn’t displaying great when it comes to scrolling up and down.

Here is how looks when scrolling in each browser:

Chrome, it is nice a smooth

Edge: a little jerky

Firefox: similar to Edge, it is a little jerky. Worse on images using parallax

Internet Explorer: VERY jerky. Worse on images that are not using parallax.

Having read this is a common problem, I was wondering if there is some CSS that I can add to help smooth out the site for the different browsers.

Thanks for the help.

Hey @LGFproductionsINC,

I’m sorry but I’m not exactly sure what the problem is. Can you give us a screen recording so we could see what’s happening on your end on different browsers? You could also try our Smooth Scroll extension.

Thanks.

Hi, thanks for the reply

I just sent you a secure note if you wanted to check the site yourself. I read about the smooth scroll extension you sent me but it seems like a blanket fix for everything. As it is right now, Chrome works fine and since Firefox and IE11 have issues in different areas, I am not sure that will actually fix the problem.

At this moment I don’t have a screen recording ability so was hoping you could check it out and see what your thoughts are to fix it.

Thank You for the help.

Hi there,

Have you enabled your smooth scroll after activating it? I tried it and it works well in IE, the scrolling improve a bit. Plus, you may disable some of your parallax background, it seems to be related to javascript performance.

Thanks!

With the smooth scroll turned on, I did adjust it a number of times to see if I can improve the smoothness. I believe I made it as good as I can using that feature.

On Microsoft Edge it looks pretty good, IE11 is okay (not great but better than it was after using smooth scroll), Firefox is pretty smooth but for some reason Firefox seems to suck the chroma out of all the images (do you normally notice that?). Chrome operates very smooth using Windows 10 but with Windows 8.1 on the Parallax images, it becomes rather jumpy compared to non parallax images. This is unfortunate when there is a great feature like the parallax option but many people out there may not be noticing it doesn’t look good on certain browsers and they may be turning visitors away from their websites.

On a different note but while talking about all these browsers, I have an issue with IE11 and Edge. When using IE11 on Windows 8.1 and Edge on Windows 10, they are both removing the top layers off the frog image on the website. If you look at the frog character, it looks like the little frog has black patches on his body (or he has been cleaning a chimney covered in soot :smile: ). The frog looks good in Chrome, Firefox and Safari. Any idea how I can make the frog look correct, with all its layers and no black showing?

Lastly, while talking about Edge. If you look at the footer on all the pages, the company phone number is showing up in blue rather than the green it should be and it is underlined for some reason. IE11 displays the correct color as do all the other browsers and none of them are putting a line under the phone number either.

Hopefully you can help on these problems I have listed here.

Thanks a lot for the assistance…

Hi There,

Thank you for the clarification, but at least provide us a direct link to the page where we can see the issue (that would help us see the issue immediately) since you have a lot of pages on your site. I did check the site on all browsers that you mentioned above and it seems the scrolling issue is already resolved.

Regarding the .svg image rendering issue. Regretfully that is a browser issue and there is nothing we can do about it. I advise that you use a .jpg or .png image instead.

Regarding the phone number having a different color, that is also a quark of EDGE. You can try the solution provided here.

Have a nice day,
Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.