Углы изображения CSS не округляются последовательно.Иногда они делают, а иногда нет - PullRequest
Новая
       60

Углы изображения CSS не округляются последовательно.Иногда они делают, а иногда нет

0 голосов
/ 27 ноября 2018

Я работаю над мобильным приложением.Это защищенный веб-сайт, использующий мобильное приложение jQuery для платформы представления.Защищенный контент, список членов команды, доставляется через Ajax после аутентификации и проверки личности.Вот скриншот с моего телефона.Сайт является адаптивным и может использоваться на настольном компьютере, планшете или мобильном устройстве.Очевидно, что он оптимизирован для мобильных устройств со ссылками tel:, sms: и mailto:

Odd CSS Troubles with Rounded Corners on image display

Я не понимаю странные углы на изображениях,Это хаотично, и случается в 75% случаев.Это происходит только с верхним левым углом верхнего изображения в списке и нижним левым углом нижнего элемента списка, независимо от длины списка.Как правило, угол отображается круглым, если вы обновите экран.Я уверен, что это какая-то временная проблема, но я не видел ее раньше.Я использую iphone 6 с браузером Safari для этого снимка экрана.Я вижу то же самое в Chrome на моем ноутбуке в режиме рабочего стола.Я не думаю, что это проблема устройства или браузера.

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%;
}

Кто-нибудь точно знает, что является причиной этой проблемы?Почему только вверху слева и внизу слева?Лучший способ улучшить отображение?

Ответы [ 2 ]

0 голосов
/ 28 ноября 2018

Я знаю, что уже есть принятый ответ, но это больше похоже на патч, чем полное понимание.

Это правило срабатывает только для любого элемента, который НЕ относится к классу .ui-li-icon, как вы можете видеть ниже:

.ui-listview>li.ui-first-child img:first-child:not(.ui-li-icon)

Так что просто добавьте этот класс в свойизображение выглядит так:

<img class="img-photo ui-li-icon" src="https://images.unsplash.com/..." onclick="openImgModal(this.src)">

Это скажет CSS НЕ применять эти правила.

0 голосов
/ 27 ноября 2018

После проверки я обнаружил, что в jQuery mobile есть некоторые CSS, которые влияют на первый и последний элементы в вашем списке.Вы можете изменить стили напрямую, но, вероятно, гораздо лучше переопределить мобильный CSS jQuery, добавив !important к свойству (border-radius: 20% !important;).Выполнение этого в вашем JSFiddle исправило это для меня.

Вот фиксированный пример .

...