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

Comments

jessebeach’s picture

StatusFileSize
new968 bytes

This needs testing by someone who can reproduce the disappearing shadow issue.

alexpott’s picture

StatusFileSize
new45.67 KB
new30.1 KB

Here's what is happening for me

If the toolbar is shorter than the viewport
toolbar_1.png

If the toolbar is longer than the viewport
toolbar2-2.png

fubhy’s picture

Status: Active » Needs work
+++ b/core/modules/toolbar/css/toolbar.module.css
@@ -183,7 +183,6 @@ body.toolbar-fixed .toolbar .toolbar-tray-horizontal {
-- 

Wait, 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).

alexpott’s picture

Status: Needs work » Active
+++ b/core/modules/toolbar/css/toolbar.module.css
@@ -183,7 +183,6 @@ body.toolbar-fixed .toolbar .toolbar-tray-horizontal {
-  overflow-x: hidden;
   overflow-y: auto;

This only works for me in overflow-y is also removed.

fubhy’s picture

From @jbeach via IRC:

overflow-y is necessary to trigger vertical scrolling

So... What do we do? It's kinda tricky to fix this if we can't reproduce it... Hmm...

corbacho’s picture

Status: Needs review » Active

I 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.

corbacho’s picture

Status: Active » Needs review
StatusFileSize
new766 bytes

Patch

philipz’s picture

Issue summary: View changes
Status: Active » Reviewed & tested by the community

Patch #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.

alexpott’s picture

Status: Reviewed & tested by the community » Fixed

Committed 2e215f7 and pushed to 8.x. Thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.