Artifacts on lollipop popup menu when using dark background

Question

As you can see the background is distorted behind the popup. It only happens on lollipop! Please don't be confused by all the x_ in my style files. I've just de-branded the code.

In theme file:

 <style name="core" parent="Theme.AppCompat.Light">

    <!-- Popup menu -->
    <item name="android:popupMenuStyle">@style/x_popup_menu_theme</item>
    <item name="android:textAppearanceSmallPopupMenu">@style/x_popup_menu_small_text</item>
    <item name="android:textAppearanceLargePopupMenu">@style/x_popup_menu_large_text</item>

</style>

in v21/themes_styles.xml

<style name="x_popup_menu_theme" parent="Widget.AppCompat.PopupMenu">
    <item name="android:popupBackground">@color/x_navy_dark</item>
</style>

<style name="x_popup_menu_large_text" parent="TextAppearance.AppCompat.Widget.PopupMenu.Large">
    <item name="android:textColor">@color/std_white</item>
</style>

<style name="x_popup_menu_small_text" parent="TextAppearance.AppCompat.Widget.PopupMenu.Small">
    <item name="android:textColor">@color/std_white</item>
</style>

If I change/remove the style to this it works as shown in the next pic.

<style name="x_popup_menu_theme" parent="Widget.AppCompat.PopupMenu">
</style>

<style name="x_popup_menu_large_text" parent="TextAppearance.AppCompat.Widget.PopupMenu.Large">
</style>

<style name="x_popup_menu_small_text" parent="TextAppearance.AppCompat.Widget.PopupMenu.Small">
</style>

Answer 1

There was a bug in Android 5.0.x (which was fixed in 5.1) where setting an opaque (ex. @color) background in an elevated window resulted in visual artifacts.

As a workaround on 5.0.x devices, you can set the background to a non-opaque drawable such as a rounded rectangle.

res/drawable/my_popup_bg.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <corners android:radius="2dp" />
    <solid android:color="@color/x_navy_dark" />
</shape>

res/values/styles.xml:

...

<style name="x_popup_menu_theme" parent="Widget.AppCompat.PopupMenu">
    <item name="android:popupBackground">@drawable/my_popup_bg</item>
</style>