esquinas imagen CSS no completan consistentemente. A veces lo hacen y otras no

votos
1

Estoy trabajando en una aplicación móvil. Es un sitio web protegido con jQuery Mobile para el marco de la presentación. El contenido protegido, la lista de los miembros del equipo, se entrega a través de Ajax después de autenticación y verificación de identidad. Aquí hay una captura de pantalla de mi teléfono. El sitio es sensible y puede ser utilizado por el escritorio, tableta o móvil. Obviamente está optimizado para móviles con tel:, sms:y mailto:enlaces

Problemas

No entiendo las esquinas impares en las imágenes. Esta es errática, y pasa el 75% del tiempo. Esto sólo ocurre a la esquina superior izquierda de la imagen superior de la lista, y la esquina inferior izquierda de la entrada inferior de la lista, no importa cuánto tiempo es la lista. En general, las pantallas de la esquina redonda si actualiza la pantalla. Estoy seguro de que su algún tipo de problema de tiempo, pero no he visto antes. Estoy usando iPhone 6 con el navegador Safari para que captura de pantalla. Veo exactamente lo mismo en Chrome en mi ordenador portátil en modo de escritorio. No creo que esto es una cuestión dependiente del dispositivo o navegador.

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

Nadie entiende exactamente lo que está causando este problema? ¿Por qué sólo la parte superior izquierda e inferior izquierda? La mejor manera de mejorar la visualización?

Publicado el 27/11/2018 a las 16:47
fuente por usuario
En otros idiomas...                            


2 respuestas

votos
1

Sé que ya hay una respuesta aceptada pero se siente más como un parche que una comprensión completa.

Esa regla sólo se desencadena por cualquier elemento que no es de una clase .ui-li-iconcomo se puede ver a continuación:

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

Así que simplemente añadir que la clase a su imagen, así:

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

Esto le dirá NO CSS para aplicar dichas normas.

Respondida el 28/11/2018 a las 08:19
fuente por usuario

votos
1

Tras la inspección, he encontrado que jQuery móvil tiene un poco de CSS que afecta a los elementos primero y último en su lista. Se podría modificar los estilos de forma directa, pero probablemente es mucho mejor para anular el CSS jQuery móvil mediante la adición !importanta la propiedad ( border-radius: 20% !important;). Hacer eso en su jsFiddle fijado por mí.

He aquí un ejemplo fija .

Respondida el 27/11/2018 a las 17:30
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more