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!
**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.