framework7.io - Last reply in a Message thread is not visible

[reinhart1010]

URL: http://framework7.io/kitchen-sink/core/?theme=ios

Browser / Version: Firefox Mobile 65.0
Operating System: Android 8.1.0
Tested Another Browser: Yes

Problem type: Design is broken
Description: Misaligned chat bubbles (see Steps to Reproduce)
Steps to Reproduce:

1. Visit the site
2. Tap on "Messages"
3. Observe the chat bubble display in Firefox 65 and Chrome 70.

Notes:

1. This sites belongs to and uses the Framework7 (@framework7io) library.
2. Framework7 also offers a Material Design theme for Android devices. Following the same steps from http://framework7.io/kitchen-sink/core/?theme=md only presents the issue of the hidden last chat bubble, not the chat bubble shape.
3. This might be a bug for Firefox - as the sites are working fine against Chrome or Safari.
   

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-sergiulogigan]

Thanks for the report, @reinhart1010. I am also able to reproduce the issue.

Tested with:
Browser / Version: Firefox Nightly 65.0a1 (2018-11-27)
Operating System: Huawei P10 (Android 8.0) - 1080 x 1920 pixels (~432 ppi pixel density)

Tried fixing it by modifying some of the CSS properties (like overflow) but with no luck.
Moving to Needsdiagnosis.

[wisniewskit]

They are adding bottom padding to the list of messages, which is supposed to keep the message list from going to the very bottom of the page, by just enough height for the chat input to have room.

However, in Firefox that 44px of bottom padding is being ignored due to bz748518. Thankfully they can just change their approach a little, and use calc with a height instead:

.ios .toolbar ~ * .page-content, .ios .toolbar ~ .page-content {
  padding-bottom: 44px; /* drop this */
  height: calc(100% - 44px); /* add this */
}

With that tweak, it works fine for me.

[adamopenweb]

Maybe @bencompton or @nolimits4web can help us with this issue?

[softvision-sergiulogigan]

The issue is still reproducible on my side.

Tested with:
Browser / Version: Firefox Nightly 68.0a1 (2019-06-07), Firefox Fenix (Preview) 1.0.1923
Operating System: OnePlus 6 (Android 9) - 1080 x 2280 pixels, 19:9 ratio (~402 ppi pixel density)

[softvision-oana-arbuzov]

The issue has been fixed. The last reply in Messages is visible now.

Tested with:
Browser / Version: Firefox Nightly 90.0a1 (🦎 90.0a1-20210523092307)
Operating System: Google Pixel 5 (Android 11) - 1080 x 2340 pixels, 19.5:9 ratio (~432 ppi density)

[reinhart1010]

I can confirm this for the Material theme demo as well.