Display of bottom border stroke missing (non urgent)

Yes, I have this same problem!

In my main app, whenever I get to this screen, the cards are initially smashed together with no gap between them.

Same as you, when I open a card and come back, then it straightens out and the gap comes back.

In my calendar app, I have the same issue, but to a much more extreme level. They are much more cut off and actually overlay each other.

Usually opening one of the cards then coming back will clear it up, or tapping randomly on the screen will get it to fix itself.

I have a theory, especially with the second example. In both cases I’m using CSS, but the first app is just a simple hack to get a shadow on a tile further up the screen. I’ll have to see if removing the css makes a difference as I’m sure it’s bumping the location of everything down a few pixels. (The app is currently being used, so I’ll have to wait until later to try it). On the second example, that screen doesn’t have any CSS applied, but the prior screen has some heavy CSS manipulation, so I’m almost positive that is playing a part in the cards initially overlaying each other and getting squashed.

I also have a theory that the card’s height is being determined before all of the data content of the card has been loaded. So for example, the card may be loading as 50px with a 5px gap, but once the content is finished loading, the height of the card bumps up to 55px and the gaps don’t reflow to account for that. Not sure how to fix that, but I’m guessing that may be the issue.

I’ve had this issue in my main app for a long time, but it hasn’t affected usability much.

3 Likes