[BUG] iOS button shadow

[esmeetewinkel]

Describe the bug
card style button shadow is inconsistent and/or intersects the button, depending on scrolling behaviour.

App version
v0.16.29 iOS

To Reproduce
Access any article template on PLH Facilitator MX

Screenshots and videos

[esmeetewinkel]

Possibly linked to #2274

[jfmcquade]

On the comp_button template, the first two "Button card" examples reliably lose some styling when scrolling them off the page and then back again:

buttons.broken.mov

[jfmcquade]

Can be replicated in the Safari browser on macOS:

[jfmcquade]

This should be fixed by #2302, but I'll add some extra details here in case they prove useful should similar issues emerge:

Following from the discussion on #2288, I returned to this issue and found the root cause to be as elusive as ever. Setting various combinations of elements to position: relative seemed to have no effect.

It's notable that the version of the card button with a toggle bar within it does not seem to have this issue. However, I was unable to replicate this by adding child elements to the other buttons (I thought that by adding a nested child with position: absolute to the ion-button with position: relative might resolve the issue, but it persists).

When the bug is present, i.e. when the background of the button is not visible, the visual result is the same as if the --background variable is passed with any invalid value, e.g. undefined. Setting the background explicitly, rather than via the --background CSS variable that ionic exposes on the ion-button, seems to resolve the issue, suggesting that the variable is not being handled correctly. However, there is more going on: when the bug is present, the shadow around the button is less dark than that around the buttons when the bug is not present. This can be replicated by removing a drop-shadow applied to the element. So it is not just that the value of --background is not being passed as it should be.