Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS is slowing down the page rendering

CSS is slowing down the page rendering

Problem

We have a page where use can browse 2000 profiles max, we add 20 profiles as user scroll to bottom of page. After 500 elements the adding of profiles get slower and after 1000 its very difficult to scroll down.

We first thought that it was result of too many DOM objects but after debugging it turns out that CSS was the actual problem, if we remove the CSS from page scrolling become very smooth till the 2000 profiles. Can any one tell me why CSS is doing this? and how we can improve it to show 2000 profiles.

Our profile contains one image only and no text.

CSS is as below.

.profileCard {
  width: 25rem;
  height: 10rem;
  float: left;
}
.profileCard .imageHolder {
  width: 9.9rem;
  height: 9.9rem;
  float: left;
}
.profileCard .imageHolderSecondary {
  height: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.profileCard .imageHolderSecondaryTwo {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.imageCard .profileCard {
   width: 18.75rem;
   height: 18.75rem;
   background-color: white;
}
.imageCard .profileCard .imageHolder {
   width: 100%;
   height: 100%;
 }
.imageCard .profileCard .imageHolder .profileImage {
   min-width: 18.75rem;
   min-height: 18.75rem;
 }

HTML:

Problem courtesy of: mtariq

Solution

What kind of layout are you aiming for because the floating seems excessive especially with no sign of clearing. The browser will likely be having a nightmare dealing with all those float positioning calculations.

EDIT: Not quite the same situation but it seems someone else has had a similar webkit related problem. I've no idea what QT is but it seems like a very similar stuttery scroll bar problem. https://bugreports.qt-project.org/browse/QTWEBKIT-122

Solution courtesy of: Hawxby

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS is slowing down the page rendering

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×