github-actions[bot]
commented
2 months ago Visual Test Summary new : 0 different : 6 same : 344
Largest Differences 1 | 3.8 % | comp_button 2 | 1.2 % | debug_card_styles 3 | 0.4 % | user_actions 4 | 0.1 % | example_calc_date 5 | 0.1 % | example_calc 6 | 0 % | feature_parent_point_box
Download Link https://nightly.link/IDEMSInternational/parenting-app-ui/actions/runs/8982315093
Run Details https://github.com/IDEMSInternational/parenting-app-ui/actions/runs/8982315093
PR Checklist
Description
Fixes an issue where the background of the button component with
variant: cardapplied would turn transparent when scrolled off screen and back again.This is a frustratingly simple solution to an issue that cause some headaches: the card variant of the button component had an extra drop-shadow filter applied, in addition to the
box-shadowapplied to the ionic button component. Removing this additional drop-shadow fixes the issue.Dev notes
Before I removed this filter, the behaviour was very strange (I've added some brief notes to #2287 in case they're useful in future). I think there is possibly a genuine bug that could be reported to ionic (or even Apple), along the lines of "Setting both a CSS drop-shadow filter and a box-shadow on an element causes CSS variables to not be passed correctly to children", but I don't think I've managed to isolate the bug fully. And this is a pattern we can easily avoid.
Git Issues
Closes #2287
Screenshots/Videos
I've made a new template, debug_card_styles, for visually comparing all the components that have are styled as a "card". The fact that we have different components that look so similar is confusing, but I think still justified as they are functionally fundamentally different (a
task-cardnecessarily has an associated task or task group, which has a completion status, whereas a button has no such association). Comparing these elements before and after the changes made by this PR, we can see that in the "before", the button withvariant: cardstands out as having a darker shadow than the other elements. In the "after" the drop-shadows for all elements match. I don't think there is any reason for this other than an error made when duplicating some CSS code (thecard-portraitvariant of the button does not use anion-buttonas its base, so deliberately has this filter applied).Working demo
Demo of comp_button component showing bug not present (see this comment on the issue for previous behaviour).
https://github.com/IDEMSInternational/parenting-app-ui/assets/64838927/23a843a8-4744-4ed9-bfd4-feca274c2eb8