Framework7 messages styling issue in FF

Question

We are having an issue with framework7 messages in Firefox. The attached image shows the last message not properly displayed.

This can probably fixed by changing some css properties. Below is the message template we used. No additional css stylings has been made.

<!-- template7 templates -->
<script type="text/template7" id="messagesTemplate">    
    <!-- Top Navbar-->
    <div class="navbar">
      <div class="navbar-inner">
        <div class="left sliding"><a href="index.cfm" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>           
        <div class="center sliding mobileNums" data-tonumber="{{@global.activeNumber}}" data-f2pmds="{{@global.f2pmds}}" data-fromnum="{{@global.fromNumber}}">{{#if @global.activeNumber}}{{@global.activeNumber}}{{else}}New Message{{/if}}  </div>
        <div class="right"><a href="#" class="link open-panel icon-only"><i class="icon icon-bars"></i></a></div>           
      </div>
    </div>
    <div class="pages navbar-through">
      <div data-page="messages" class="page no-toolbar toolbar-fixed">
        <div class="toolbar messagebar">
          <div class="toolbar-inner"><a href="#" class="link icon-only"><i class="icon icon-camera"></i></a>
            <textarea placeholder="Message"></textarea><a href="#" class="link send-message">Send</a>
          </div>
        </div>
        <div class="page-content messages-content">
          <div class="messages">     
                {{#each messages}}                      
                    {{#if dsent}}
                        <div class="messages-date">{{dsent}}</div>
                    {{/if}}                 

                    {{#if sent}}                                                    
                        <div class="message message-sent">
                          <div class="message-text">{{body}}
                          <br />
                          {{#if time}}<div class="msgDate">{{time}}</div>{{/if}}
                          </div>
                        </div>  
                    {{else}}                                    
                        <div class="message message-received message-with-avatar">
                          <!---<div class="message-name">Kate</div>--->
                          <div class="message-text">{{body}}
                          <br />
                          {{#if time}}<div class="msgDate">{{time}}</div>{{/if}}
                          </div>
                          <div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-7.jpg)" class="message-avatar"></div>
                        </div>                                          
                    {{/if}}

                {{/each}}           

            </div>
        </div>
      </div>
    </div>          
</script>   

Answer 1

It can't be fixed for Firefox. It just doesn't support CSS masks like in webkit browsers

Answer 2

If your messagebar is a fixed height, like mine, you can try

@-moz-document url-prefix() {
    .messages{
    padding-bottom: 44px;
     }
    .message-received > .message-text{
    margin-left: 35px!important;
  }
}

This works for me, but you can't add the tails on messages in any browser other than Chrome (or Safari).

This is because they are the only browsers to support the -webkit-mask-box-image property.