That’s exactly my issue. In some lines with 2 tags, I see a flap on my iOS device, both safari and chrome. But seems to work fine on on MacOS.
Apart from that, can you change the direction of the triangle in the Tag, like this: 
I tried my beginner CSS skills but couldn’t achieve that. Can you help me out with that?
I changed color of my code to Red (my theme color) and it looks awesome as yours 
But using colours on tags drives focus on tags constantly rather than the titles which are more important. So I’d still keep the tags in kind of background and content in front.
Here is what it looks like: 
Just in case somebody else want a red tag on black theme. here is my CSS code for that:
CSS for Red Tag on Black Background
.discourse-tag.box {
position: relative;
display: inline-block;
text-decoration: none;
font-weight: normal;
background-color: #9c0c16 !important;
border-radius: 3px 0 0 3px;
height: 20px;
line-height: 20px;
padding: 0 13px 0 21px;
margin: 0 10px 0 0;
}
.discourse-tag.box::before {
position: absolute;
content: ‘’;
background: #000;
border-radius: 100%;
height: 6px;
left: 7px;
width: 6px;
top: 7px;
box-shadow: inset 0 1px rgba(0,0,0,0.25);
}
.discourse-tags .discourse-tag.box::after {
position: absolute;
content: ‘’;
background: #000;
border-bottom: 11px solid transparent;
border-left: 10px solid #9c0c16;
border-top: 10px solid transparent;
right: 0;
top: 0;
}
a.discourse-tag.box {
color: #fff !important;
font-weight: bold;
}