CSS image corners don't round off consistently. Sometimes they do and sometimes they don't

Question

I'm working on a mobile app. It's a protected website using jQuery mobile for the presentation framework. The protected content, the list of team members, is delivered via Ajax after authentication and identity verification. Here's a screen shot from my phone. The site is responsive, and can be used by desktop, tablet or mobile. Obviously it's optimized for mobile with tel:, sms: and mailto: links

I don't understand the odd corners on the images. This is erratic, and happens 75% of the time. This only happens to the upper left hand corner of the top image in the list, and the bottom left hand corner of the bottom entry in the list, no matter how long the list is. Generally, the corner displays round if you refresh the screen. I'm sure its some sort of timing issue, but I've not seen it before. I'm using iphone 6 with Safari browser for that screen shot. I see the exact same thing in Chrome on my laptop in desktop mode. I don't think this is a device or browser dependent issue.

HTML:

<div id="page6_team_phones">
    <div role="main" class="ui-content jqm-content">
        <h2>Phone Contact List</h2>
        <ul data-role="listview" id="phonelist" class="ui-listview">
            <li class="ui-li-static ui-body-inherit">
                <div class="img_container"><img class="img-photo" src="https://images.unsplash.com/photo-15..."></div>
                <div class="userName">Andrea Apple</div>
                <div style="clear: both;"></div>
                <div class="phoneNumber"><a href="tel:+11234567891">1234567891</a></div>
                <div class="sms"><a href="sms:+11234567891"><img src="../images/crosstxt-icon.jpg"></a></div>
                <div class="email"><a href="mailto:123@email.com"><img src="../images/email-icon.png"></a></div>
            </li>
            <li class="ui-li-static ui-body-inherit">
                <div class="img_container"><img class="img-photo" src="https://i.imgur.com/KOXOBiN.gif"></div>
                <div class="userName">Bill Banana</div>
                <div style="clear: both;"></div>
                <div class="phoneNumber"><a href="tel:+19876543211">9876543211</a></div>
                <div class="sms"><a href="sms:+19876543211"><img src="../images/crosstxt-icon.jpg"></a></div>
                <div class="email"><a href="mailto:456@fake.com"><img src="../images/email-icon.png"></a></div>
            </li>

CSS:

.img_container {
    float: left;
}
.img-photo {
    height: 24vw;     /*  photo = square aspect ratio  */
    width: 24vw;
    object-fit: cover;
    border-radius: 20%;
}

Anybody understand exactly what is causing this issue? Why only top left and bottom left? Best way to improve the display?

Answer 1

Upon inspection, I've found that jQuery mobile has some CSS that affects the first and last elements in your list. You could modify the styles directly, but it's probably much better to override the jQuery mobile CSS by adding !important to the property (border-radius: 20% !important;). Doing that in your JSFiddle fixed it for me.

Here's a fixed example.