[Bug? + possible solution] IOS Safari

[martinandersen3d]

This bug is only on IOS (i used Apples Xcode iphone simulator, i believe the browser version is safari 12.1). This is not a bug in Chrome, Firefix, Opera, Edge. I'm not sure if this is a bug. But I'll report anyway.

Trying to fit the chat on mobile.

When there is MORE than 10 ish messages on the phone, then the "message-text-box", is longer down and outside the screen, the user then need to scroll down to find the "message-text-box". The default behavior is that the scroll is at the top, and not down at the textbox.

Setting a fixed calculated height of "container-message-display": To fix this, I want to Calculate the max-height of the "container-message-display". Here is a hardcoded example:

.container-message-display{
    max-height: 400px !important;
    height: 400px !important;
    /* background-color: red !important; */
    overflow-y: scroll !important;
}

The above code results in the screenshot, with overlapping messages. Inspecting the Safari developer tools, it looks like the flexbox needs some work. It behaves like in the illustration.

Possible Solution (Worked for me):

/************** Safari 10.1+ ********************/
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {

    .message-container{
        display:-webkit-box !important;
    }

}}

Screenshots is from safari / ios(simulator):

[MatheusrdSantos]

Hi, @martinandersen3d I'll implement your solution. However, I can't give a complete safari support because I don't have any machine with IOS for test. Thanks for reporting this issue and proposing a solution.

[MatheusrdSantos]

I have implemented your solution (0c73a260dacba990409a1d2c918f531b5744e2d3) and it works pretty fine. As a workaround, I'm using the Midori browser to test safari 10 issues because it uses the WebKit rendering engine (the same as safari).

So I guess this issue was solved. Thanks!