Task #6775
closed
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 9 years ago.
Updated almost 9 years ago.
Description
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.
Files
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.
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.
- Subject changed from Filter list shows whited-out boxes on slower connections to Filter list shows whited-out boxes on high resolution displays
- Status changed from New to Resolved
- translation missing: en.field_remaining_hours set to 0.0
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: http://blog.getpostman.com/2015/01/23/ui-repaint-issue-on-chrome/
- Status changed from Resolved to In Progress
- Estimated time set to 0.00 h
This seems to happening again in the search result list
- Status changed from In Progress to Resolved
Also available in: Atom
PDF