Closed Bug 937291 Opened 8 years ago Closed 8 years ago

contacts triggers large reflows rendering while scrolling


(Firefox OS Graveyard :: Gaia::Contacts, defect, P1)

Gonk (Firefox OS)


(blocking-b2g:koi+, b2g-v1.2 fixed)

blocking-b2g koi+
Tracking Status
b2g-v1.2 --- fixed


(Reporter: bkelly, Assigned: bkelly)



(Keywords: perf, Whiteboard: [c= p=2 s=2013.11.22 u=1.2])


(1 file, 2 obsolete files)

While working on bug 936908 I noticed that contacts seems to trigger relatively large reflows (30ms to 60ms) while scrolling.  This is occurring because we render contacts as we scroll.

After talking with dholbert it seems we either need to reduce the DOM or constrain the reflow.  At this point we don't have many options to reduce the DOM size, but we can reduce the size of the reflow to a smaller area.

Adding overflow: hidden to the group list sections reduces the reflows down to ~10ms or less.
Jose, this patch limits reflows when we render contacts while scrolling but using overflow:hidden on the individual group lists.
Attachment #830380 - Flags: review?(jmcf)
Comment on attachment 830380 [details] [review]
Pull request at

good work thanks
Attachment #830380 - Flags: review?(jmcf) → review+
Thanks for the review!  Green travis, so landed:
Closed: 8 years ago
Resolution: --- → FIXED
Whiteboard: [c= p=2 s= u=] → [c= p=2 s=2013.11.22 u=]
blocking-b2g: koi? → koi+
Depends on: 939283
Reverted due to regression in checkboxes getting clipped in selection view:

master:  6728e0746e9302079564993f6e11317d3e4bf39b
v1.2:    e54a2d40e52bd66e95ed37ae8705afe4d55ab9ea
Resolution: FIXED → ---
Francisco, here is another attempt at limiting the overflow for the list.  In order to avoid clipping the checkboxes I moved them 1 rem to the right so that they no longer overhang the edge of the list section.

Is this slight move of the checkbox to the right acceptable?

I also tried just using overflow-y:hidden, but that still seemed to clip the checkboxes along the x-axis for some unknown reason.
Attachment #830380 - Attachment is obsolete: true
Attachment #8335522 - Flags: review?(francisco.jordano)
Comment on attachment 8335522 [details] [review]
Pull request at

Actually, I want to look at this further.  There are other visual differences.  For example, the header underline is shorter when its in the group list vs when presented in the fixed header.
Attachment #8335522 - Attachment is obsolete: true
Attachment #8335522 - Flags: review?(francisco.jordano)
Francisco, can you review this patch adding overflow:hidden each group <section> element?  This greatly reduces reflows when we are rendering just-in-time while scrolling.  Contacts scrolling is currently a koi+ issue, so I would like to land and uplift as soon as possible.

This landed once and had to be backed out due to clipping of the checkboxes in the export selection mode.

This new patch fixes the checkbox issue by moving some of the screen padding out of the parent #groups-container section and into each individual group section.

I verified that the list looks correctly in normal list mode, search mode, selection mode, and search selection mode.

Attachment #8336370 - Flags: review?(francisco.jordano)
Whiteboard: [c= p=2 s=2013.11.22 u=] → [c= p=2 s=2013.11.22 u=1.2]
(In reply to Ben Kelly [:bkelly] from comment #8)
> I verified that the list looks correctly in normal list mode, search mode,
> selection mode, and search selection mode.
> Thanks!

That's a lot of modes!

Thanks a lot for taking care of this, doing the review right now!
Comment on attachment 8336370 [details] [review]
Pull request at

Tried on the phone and works perfectly.


Attachment #8336370 - Flags: review?(francisco.jordano) → review+
Thanks for the quick review!  Merged:
Closed: 8 years ago8 years ago
Resolution: --- → FIXED
Uplifted to v1.2:   3c05682dfe8463a1f64740379009fb4363c027b4
You need to log in before you can comment on or make changes to this bug.