Search panel background is transparent when scroll bar is visible in Android and Mac Chrome


(Dave McClure) #1

After clicking “show more” in the search results on my Nexus 5, the background goes transparent:


(Erlend Sogge Heggen) #2

This is present om desktop (Mac osx 10.9, latest chrome) as well.


(Jeff Atwood) #3

No repro on iPhone, at least.


(Dave McClure) #4

It’s now happening here even before I do a “show more” on Android (Nexus 5 / Chrome). But it’s not happening for me on desktop (Windows / Latest Chrome).


(James Milligan) #5

Looks like a z-index issue - you can kind of see it behind some of the elements. Repro’d on “show more” on Chrome / Nexus 4


(Jeff Atwood) #6

Yeah I think this is specific to Mobile Chrome.


(Dave McClure) #7

It’s relatively new behavior… I use search on this phone pretty frequently and only just noticed it before reporting it.


(Sam Saffron) #8

Must be related to the way we do scrolling now, we used to scroll the whole panel and now we only scroll results. @awesomerobot any ideas ? do you have mobile chrome to test with


(Erlend Sogge Heggen) #9

Like I said, I’m also seeing this on Mac OS X 10.9, Chrome 38.


(Sam Saffron) #10

I have a repro on mac chrome, will look tomorrow.


(Dave McClure) #11

Spent a little more time investigating this issue and found that:

  1. It’s related to scrolling. To reproduce, the results area has to be scrollable.
  2. This first started in this commit (as you suspected @sam)
  3. On Mac OS X Chrome, I can ‘fix’ it by adding 22px of total top/bottom padding here, for instance, 11 of each, like so:
#search-dropdown .results {
  max-height: 300px;
  overflow: auto;
  padding-top: 11px;
  padding-bottom: 11px;
}

I don’t understand why that fixes it, so I’ll leave it to you to decide whether that’s the way to go or if there’s a better way to address whatever the underlying issue is.


(Sam Saffron) #12

Should be fixed in latest, flag to reopen if not the case.

https://github.com/discourse/discourse/commit/5b02bc03a8115493c5bc0777e1cc55c7357c045f

and

https://github.com/discourse/discourse/commit/6d3d42561132a0675f9514aa887f48004e252449


(Sam Saffron) #13