Problem/Motivation
The Toolbar tray box shadow disappears at small viewports sizes on Chrome, on a Mac, under unpredictable conditions. fubhy and alexpott are able to trigger the loss of the shadow styling. jessebeach was not able to reproduce.
Proposed resolution
Remove the overflow styling on the trays. This resolves the issue. The overflow property is generally agreed to be unnecessary at this point in time.
API changes
None.
Original report by @jessebeach
l
| Comment | File | Size | Author |
|---|---|---|---|
| #7 | drupal-addborder-2100133-7.patch | 766 bytes | corbacho |
| #2 | toolbar_1.png | 30.1 KB | alexpott |
| #2 | toolbar2-2.png | 45.67 KB | alexpott |
| #1 | disappearing-shadow-2100133-1.patch | 968 bytes | jessebeach |
Comments
Comment #1
jessebeach commentedThis needs testing by someone who can reproduce the disappearing shadow issue.
Comment #2
alexpottHere's what is happening for me
If the toolbar is shorter than the viewport

If the toolbar is longer than the viewport

Comment #3
fubhy commentedWait, what is that?
Anyways... Clarification: I am not able to reproduce this either. It has to do something with a particular browser verison alex is using or with some browser extension or whatever. I just saw it happening on his screen and unless he's been trolling us for whatever reason (:P) this problem exists. There is no reason for us to have that overflow-x / overflow-y stuff in there (both are poorly supported anyways afaik).
However, we have to remove both to make it work IIRC. So just removing overflow-x won't solve it. Both need to go away (which is fine, since it does not break anything if we remove them, so they seem to be redundant anyways).
Comment #4
alexpottThis only works for me in overflow-y is also removed.
Comment #5
fubhy commentedFrom @jbeach via IRC:
So... What do we do? It's kinda tricky to fix this if we can't reproduce it... Hmm...
Comment #6
corbacho commentedI can reproduce it. I filled this #2115969: Add a border to the vertical toolbar. Closed now as duplicated.
The border and box-shadow are not visible in Chrome 30 and Chrome Canary on Mac. I tested in Incognito mode to make sure no Extension was messing it up.
But then, it works fine on Firefox and Safari on Mac and Chrome on Windows.
My suggestion is to apply the CSS to the container instead of the inner container (lining) with :before class, that can be problematic how the browser can interpret that.
Comment #7
corbacho commentedPatch
Comment #8
philipz commentedPatch #7 worked for me and problem is gone both in Chrome and in Safari.
It was showing up randomly but very often so this fix is really important.
Comment #9
alexpottCommitted 2e215f7 and pushed to 8.x. Thanks!