CODEWITHSUNDEEP
phphtmlcssbrowserscroll
frostedpops
frostedpops

Reputation: 165

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!

Upvotes: 3

Views: 1821

Answers (3)

ericdc
ericdc

Reputation: 11289

I have a complex layout and IE9 was stutter scrolling for me too. In my case the regular page with the full layout scrolled fine but when adding a ckeditor in the same layout scrolling got very choppy. I guess IE just can't render rounded corners and a complex UI at the same time.

I used this to fix it:

<!--[if lt IE 10]>
<style type="text/css">
* {
-webkit-border-radius: 0px !important; 
-khtml-border-radius: 0px !important; 
-moz-border-radius: 0px !important; 
border-radius: 0px !important; 
}
</style>
<![endif]-->

Upvotes: 0

frostedpops
frostedpops

Reputation: 165

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

Upvotes: 2

Matthew Darnell
Matthew Darnell

Reputation: 4588

It is very likely your box shadow causing the issue. There isn't a ton of documentation out there, but it is generally advisable not to use CSS box shadows that are that large.

http://nerds.airbnb.com/box-shadows-are-expensive-to-paint

Upvotes: 1

Related Questions