Task #6775

Story #6716: Production-ready DataONE theme

Task #6762: User testing at DUG July 12

Filter list shows whited-out boxes on high resolution displays

Added by Lauren Walker over 7 years ago. Updated over 6 years ago.

Target version:
Start date:
Due date:
% Done:


Estimated time:
0.00 h


Seen on Matt's screenshare.

When a new search is sent, the page is loading and the filter box has 2-3 white boxes (in seemingly random places) covering up parts of the UI.


#1 Updated by Matt Jones over 7 years ago

This appears to be a browser rendering issue, and it is still occurring using Chrome Version 43.0.2357.81 (64-bit) on Mac OS X 10.10.3. What I've found is if I load the search page, some of the filter panes don't render beyond a white panel -- see attached screenshot. If I open a new tab, then close it, the repaint of the original screen causes everything to show up fine -- so it appears to be some sort of repaint/refresh issue. See second screenshot, in which I didn't do a reload or anything, just opened and closed another tab.

#2 Updated by Matt Jones over 7 years ago

Just tried it again to see if there were Javascript errors, and found that a different part of the filter pane showed white rendering issues -- attached another screenshot showing that. No Javascript errors were in the console. Also, when I reload the page, I can see the whole filter pane render (like the list of MNs, and other details), which is then covered up by the white regions. So it seems like a graphics issue. I'm not sure the description of this being a slower connection is right, as my connection speed is quite good and is currently showing a 22Mb/s rate.

#3 Updated by Lauren Walker over 7 years ago

  • Subject changed from Filter list shows whited-out boxes on slower connections to Filter list shows whited-out boxes on high resolution displays

#4 Updated by Lauren Walker over 7 years ago

  • translation missing: en.field_remaining_hours set to 0.0
  • Status changed from New to Resolved

This issue was happening in Chrome on only high resolution displays. It was happening in elements (particularly the sidebar in map mode) that had an overflow:scroll or overflow:overlay CSS rule. The solution is to force the browser to use hardware-accelerated CSS on that element by adding a webkit-transform: translate3d(0,0,0); to the CSS for all elements with the overflow:scroll or overflow:overlay.

We tested on Peter's retina macbook and 4k monitor and the white boxes were not displaying.

I found the answer from here:

#5 Updated by Lauren Walker almost 7 years ago

  • Estimated time set to 0.00 h
  • Status changed from Resolved to In Progress

This seems to happening again in the search result list

#6 Updated by Lauren Walker over 6 years ago

  • Status changed from In Progress to Resolved

Also available in: Atom PDF