Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Website Choppy in IE when scrolling but not in Firefox/Chrome/Safari

I'm looking once again for help from the collective. I created a site which when viewed in IE scrolls choppy but is smooth and fine in all other browsers. I checked on two different laptops to be sure it wasn't just my video card.

I also removed all the images to see if it was an image display issue and that didn't fix the problem. Does anyone have any ideas?

UPDATE* : Based on the feedback I've also tried the page with the images, box-shadows, and google font's removed and I still get the choppy scroll. I've also now just removed the nav and side banner...ugh still no good.

FOUND IT: Ok so after essentially deconstructing my website piece by css piece I found that the cause of the choppy screen was due (mostly) to the use of the border-radius attribute (thanks for pointing me in that direction). my page has two container divs that I applied the following css to: -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;

Once I removed these the page was 90% smoother. I still get some choppy scrolling due to the header image it looks like but it's much better.

**The final solution was to: 1. Added conditional IE specifically to disable the border-radius when viewed through IE browser 2. To remove the last bit of choppy-ness :) I took all the images I was using, created a sprite for them in photoshop and then used yahoo Smush-It to compress that file. The site now loads great.

Thanks for the input all!

My url is http://monopolydealrules.com

Thanks!

like image 810
frostedpops Avatar asked Dec 13 '25 15:12

frostedpops


1 Answers

**The final solution was to: 1. Added conditional IE specifically to disable the border-radius when viewed through IE browser 2. To remove the last bit of choppy-ness :) I took all the images I was using, created a sprite for them in photoshop and then used yahoo Smush-It to compress that file. The site now loads great.

Thanks All for your insight!

UPDATE* I also ran into a similar issue in safari mobile on my iphone for my mobile version. removing the border-radius attribute from the container element also fixed the speed for my mobile site.

like image 115
frostedpops Avatar answered Dec 15 '25 09:12

frostedpops