CSS on device different to browser - html

Question

i am using Ionic2 and have an app that has messages. the message looks as follows in a browser:
However, running on an Android or iOS device, it looks as follows:
As you can see, the tail on each message is missing.
Question
If anyone can advise how I can get the style to be consistent and display the tail on all devices?
HTML
<ion-content padding class="messages-page-content">
<ion-list class="message-list">
<ion-item class="message-item" *ngFor="let item of firelist | async">
<div [ngClass]="{'message message-me':(item.memberId1 == me.uid)}">
<div [ngClass]="{'message message-you':(item.memberId1 == you.uid)}">
<div class="message-content">{{item.message_text}}</div>
<span class="time-tick">
<span class="message-timestamp-date">{{item.timestamp | amDateFormat: 'D MMM YY'}}</span>
<span class="message-timestamp">{{item.timestamp | amDateFormat: 'h:mm a'}}</span>
<div *ngIf="item.memberId1 === me.uid && item.readByReceiver === true">
<span class="checkmark">
<div class="checkmark_stem"></div>
<div class="checkmark_kick"></div>
</span>
</div>
</span>
</div>
</div>
</ion-item>
</ion-list>
</ion-content>
CSS
See: background-image: url(/assets/message-me.png); and background-image: url(/assets/message-you.png);
.title-timestamp {
font-size: 11px;
color: gray;
}
.message-item {
background-color: transparent;
}
.label {
overflow: visible;
white-space: normal;
}
.message-send {
font-size: 3.2em;
}
.input-wrapper {
overflow: visible;
}
.item-md.item-block .item-inner {
padding-left: 8px;
}
.messages-page-navbar {
.chat-picture {
width: 50px;
border-radius: 50%;
float: left;
}
.chat-title {
line-height: 27px;
display: inline-block;
}
.chat-subtitle {
font-size: 11px;
padding: 0px;
}
}
.messages-page-content {
> scroll-content {
padding: 0;
}
.message-list {
background-color: #E0DAD6;
background-repeat: no-repeat;
background-size: cover;
}
.message-wrapper {
margin-bottom: 9px;
&::after {
content: "";
display: table;
clear: both;
}
}
.message {
display: inline-block;
position: relative;
max-width: 236px;
border-radius: 7px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
&.message-me {
float: right;
background-color: #effeff;
&::before {
right: -11px;
background-image: url(/assets/message-me.png);
}
}
&.message-you {
float: left;
background-color: #FFF;
&::before {
left: -11px;
background-image: url(/assets/message-you.png);
}
}
&.message-you::before, &.message-me::before {
content: "";
position: absolute;
bottom: 3px;
width: 12px;
height: 19px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;
}
.message-content {
padding: 5px 7px;
word-wrap: break-word;
&::after {
content: " \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";
display: inline;
}
}
.message-timestamp {
position: absolute;
bottom: 2px;
right: 17px;
font-size: 11px;
color: gray;
}
.message-timestamp-date {
position: relative;
bottom: 2px;
right: -6px;
font-size: 9px;
color: gray;
}
}
}
.message-datetime {
font-size: 11px;
color: grey;
}
.messages-page-footer {
padding-right: 0;
.message-editor {
margin-left: 2px;
padding-left: 5px;
background: white;
border-radius: 3px;
}
.message-editor-button {
background: color($colors, primary);
box-shadow: none;
width: 50px;
height: 50px;
font-size: 17px;
margin: auto;
}
}
.checkmark {
display:inline-block;
width: 22px;
height:22px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
position: absolute;
bottom: 2px;
right: 1px;
}
.checkmark_stem {
position: absolute;
width:2px;
height:9px;
background-color:#3BB9FF;
left:15px;
top:6px;
}
.checkmark_kick {
position: absolute;
width:2px;
height:3px;
background-color:#3BB9FF;
left:13px;
top:12px;
}
.time-tick {
display:inline-block;
}
UPDATE
Thanks to the advise below, I add the following:
CSS
.tail-me {
background-image: url(/assets/message-me.png);
background-repeat: no-repeat;
bottom: 0;
right: -11px
}
.tail-you {
background-image: url(/assets/message-you.png);
background-repeat: no-repeat;
bottom: 0;
left: -11px
}
HTML
<ion-item class="message-item tail-me" *ngFor="let item of firelist | async">
And it displays this in the browser:
As you can see, the tail is in the wrong position. If I make the position: absolute, it throws the message out totally. The left and bottom css attributes move the message bubbles. So I am guessing I am putting the tail-me on the wrong tag in the html. Any ideas?
On an iOS and Android device, it still does not display the tail:

Answer 1

It seems like the Android and iOS versions don't process pseudo elements correctly. I would try another method such as creating a class element that is placed in .message-me and .message-you.
Append that class element to each message box, and add an absolute positioning to it so that it's:
.tail-me {
background-image: url(/assets/message-me.png);
position: absolute;
bottom: 0;
right: -11px
}
and
.tail-you {
background-image: url(/assets/message-you.png);
position: absolute;
bottom: 0;
left: -11px
}
An absolutely positioned element inside of a relatively positioned element (your .message), will be placed inside of that relative position element.

Answer 2

It was a silly mistake on my part. It does work on a devise. The issue was the path to the image was incorrect, so the devise was not picking up the image.
Was:
background-image: url(/assets/message-me.png);
Should be:
background-image: url(../assets/message-me.png);