search

IDEMSInternational / open-app-builder

PLH App Frontend
GNU General Public License v3.0
5 stars 24 forks source link

[BUG] iOS button shadow #2287

Closed esmeetewinkel closed 2 months ago

esmeetewinkel commented 2 months ago

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 image

esmeetewinkel commented 2 months ago

Possibly linked to #2274

jfmcquade commented 2 months ago

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:

https://github.com/IDEMSInternational/parenting-app-ui/assets/64838927/4744f295-9ef0-4051-85ae-df63ee2c967c

jfmcquade commented 2 months ago

Can be replicated in the Safari browser on macOS:

Screenshot 2024-04-11 at 17 06 36
jfmcquade commented 2 months ago

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

Screenshot 2024-04-25 at 14 59 34

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.