Fix EuiPopover arrow position in Android and Linux

[dimitropoulos]

TLDR;

Before

After

This is a one-pixel offset change.

Summary

So I noticed that some of the chevrons (i.e. arrows) on the popovers on the BasicTables component had a dark line between the arrow and the box:

without dark line:

with dark line:

I noticed that this happens repeatably for the same components on the same page (at the same zoom level), as well as that which popovers on the page do it changes if I adjust my browser zoom. This suggests it's just a subpixel thingy, as I like to call them.

To help illustrate: we can move the arrow down to exaggerate the effect:

Or we can move it up too far:

It seemed like, in this case, all that was needed was one more pixel. And it's in better shape now.

I checked all of the positions in 3 different zoom levels and (on my machine, running chrome) they all seemed to work now. Just to be sure there wasn't anything I missed with the background of the popover and the background of the page both being white I made sure to color the background for the tests. I know the border is grey, but I can imagine why the bottom one might stand out more because of the bottom shadow, and also I found out that if you star at enough of these you start to imagine the line being there when it isn't thanks to the hermann grid illusion, haha.

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in IE11 and Firefox
• Props have proper autodocs
• Added documentation examples
• Added or updated jest tests
• Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[kibanamachine]

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

[elizabetdev]

jenkins test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3188/

[elizabetdev]

Hi @dimitropoulos,

Thanks for creating this PR.

I tried to replicate this issue without success. I opened the page https://elastic.github.io/eui/#/tabular-content/tables and toggled the rows per page popovers. I tried in different browsers and I couldn't see the dark line.

Chrome with Zoom:

Chrome without Zoom:

Can you provide instructions on how to replicate the issue?

[snide]

I've also never seen this issue. Giving us your browser and OS might help. This can also be something that comes from subpixel rendering, which non-retina screens can have issues with. A better summary of your test env will help us out.

[dimitropoulos]

sorry, I mentioned it was chrome, but I should have made it much clearer:

• I'm using Linux 5.3 x86_84 on Chrome 80.0.3987.132

It doesn't happen for me (on Linux) on Firefox, although it is reproducible on Android (on Chrome - (well, Brave, but same thing)):

(note, that you have to go the third one down to see it)

[cchaos]

👍 Yep, I can replicate this on Chrome on Android

[dimitropoulos]

bonus: if you go to the PR link on android, it's fixed! :)

[elizabetdev]

Thanks @dimitropoulos! I could replicate the issue in Android and the fix looks good to me!