Shadow effect with Atom Material UI Theme

[Gunny123]

Weird shadowing at bottom of the toolbar
Reproduction Steps:

1. Launch Atom
2. Ensure tool-bar is activated

Expected behavior:

Solid uniform color

Observed behavior:

Shadow at bottom right when tool-bar is positioned to the left and right.
Screenshots and GIFs

Atom version: 1.9.2 - 1.9.6
OS and version: Windows 10 Home Anniversary Update

Installed packages:

├── aligner@0.22.1
├── atom-beautify@0.29.10
├── atom-html-preview@0.1.22
├── atom-jade@0.3.0
├── atom-material-syntax@0.4.6
├── atom-material-syntax-light@0.4.5
├── atom-material-ui@1.3.3
├── color-picker@2.2.2
├── emmet@2.4.3
├── file-icons@1.7.17
├── github-2016-syntax@1.2.0
├── gl-light-syntax@2.2.0
├── improved-chester-atom-syntax@0.2.0
├── language-javascript-jsx@0.3.7
├── language-swift@0.4.0
├── language-vue@0.14.1
├── minimap@4.24.7
├── new-tab@0.5.1
├── php-cs-fixer@2.5.9
├── pigments@0.31.2
├── pinned-tabs@0.3.1
├── tool-bar@1.0.0
├── tool-bar-main@0.0.9
├── two-light-ui@1.1.0
├── wwdc16-syntax@1.0.0
└── xcode-theme@1.4.0

Additional information:

• Problem can be reproduced in safe mode: Yes
• Problem started happening recently, didn't happen in an older version of Atom: Yes
• Problem can be reliably reproduced, doesn't happen randomly: Yes
• Problem happens with all files and projects, not only some files or projects: Yes

[jerone]

The shadow you see is a feature called Gutter Shadow (implemented in #61). It should only appear on vertical tool-bars and when there's not enough room for all tool-bar buttons.

Can you confirm it also happen when disabling your themes?

[Gunny123]

Can confirm when I switch to the default Atom One Light theme from silvestreh's Material UI theme it still exists...

I brought it up with silvestreh and made this issue with him, but he closed it and sent me here.

[jerone]

So, I can confirm this issue in the latest releases.
It could be an Atom bug.
There seems to be a difference in fetching dimensions for element.getBoundingClientRect().height and element.scrollHeight.

> $0.getBoundingClientRect().height
< 786.5
> $0.scrollHeight
< 787

[Gunny123]

I guess I should leave an issue on the Atom repo then, yeah?

[jerone]

I've not seen this happen on any previous versions of Atom (aldo I'm using the vertical tool-bar much). So it could be introduced in Atom or Electron. I've actually asked on Slack if someone could confirm this being a bug, but it's quiet there.

[Gunny123]

I've not seen this happen on any previous versions of Atom

I'm going to update to Atom version 1.9.5 and see if the update fixes it. I forgot to restart Atom on my Windows machine where this is occurring. I'll report back...

It's interesting to note that this does not happen on OS X 10.11.6 with Atom version 1.9.5

[jerone]

It's interesting to note that this does not happen on OS X 10.11.6

Did you try resizing Atom?

[jerone]

After some research I found out that, according the specs, element.getBoundingClientRect().height returns a floating-point value. The correct solution is to use offsetHeight instead, which returns an integer, just like scrollHeight.

Fix coming soon.

[Gunny123]

Yes I tried resizing and the issue still remains.

After some research I found out that, according the specs, element.getBoundingClientRect().height returns a floating-point value. The correct solution is to use offsetHeight instead, which returns an integer, just like scrollHeight. Fix coming soon.

You're a boss.

[jerone]

Thanks for reporting, this will be fixed in the next release.