chrome, android browser nicht rendern bilderstile

Question

Ich habe eine react-Komponente, die einige Daten lädt, iteriert über ein Array und gibt auch eine Reihe von Bildern von Lorempixel.

Ich habe die folgenden Stile für diese Bilder:

.ekipa-list .ekipa-li .ekipa-li-headshot { 
    height: 3em; 
    width: 3em; 
    border-radius: 50%; 
    padding-top: 0; 
    margin-bottom: 0; 
} 

Diese korrekt in einem meiner Ansichten angewendet bekommen. Sie werden auch in Safari und Firefox korrekt angewendet. In einer anderen Ansicht werden sie jedoch nicht beim ersten Laden angewendet. Beide Ansichten laden dieselbe Komponente mit den gleichen Daten.

Allerdings kann ich die Stile in Chrome sehen, wenn die Elemente die Kontrolle, aber sie sind nicht

gemacht Um dies zu reproduzieren gehen zu: http://altereko.si/#/zavod

die Bilder in der unteren Liste sehen. Dann gehen Sie zu Kontakt und sehen Sie, wie sie korrekt gerendert werden. Sie werden auch korrekt auf der Bildschirmgröße angezeigt.

Dieses Problem scheint durch diese Codezeile verursacht werden:

{this.props.bio ? <p className="ekipa-li-bio">{this.props.bio}</p> :null} 

Wenn ich es aus meiner Komponente zu entfernen:

render() { 
    return (
     <li className="ekipa-li" id={this.props.id}> 
     <div className="ekipa-li-visible" onClick={this.expandContact}> 
      <img alt="portret-člana-ekipe" className="ekipa-li-headshot" src={this.props.photo}/> 
      <div className="ekipa-li-text"> 
      <p className="ekipa-li-name">{this.props.name}</p> 
      <p className="ekipa-li-function">{this.props.function}</p> 
      {this.props.bio ? <p className="ekipa-li-bio">{this.props.bio}</p> :null} 
      </div> 
     </div> 
     {!this.state.hidden 
      ? (<div className="ekipa-li-expand"> 
       <div className="ekipa-li-expand-link-container"> 
       <a className="ekipa-li-expand-link" href={'mailto:'+this.props.email}> 
        <i className="ekipa-li-icon material-icons">email</i> 
        <span className="ekipa-li-expand-link-text">{this.props.email}</span> 
       </a> 
       </div> 
       <div className="ekipa-li-expand-link-container"> 
       <a className="ekipa-li-expand-link" href={'tel:'+this.props.mobile}> 
        <i className="ekipa-li-icon material-icons">stay_current_portrait</i> 
        <span className="ekipa-li-expand-link-text">{this.props.mobile}</span> 
       </a> 
       </div> 
      </div>) 
      : null} 
     </li> 
    ) 
    } 

Alles wie erwartet macht.

Das Gleiche passiert, wenn ich die Bio-Prop nicht passieren.

Answer 1

Die einfachste Lösung ist, Ihre img in eine div zu verpacken. Derzeit geschieht dies, weil die Seite zavod über mehrzeiligen Absatztext verfügt, der das Flex-Layout umschließt und dehnt.

.flex { 
 
    display:flex; 
 
    width: 300px; 
 
}

<div class="flex"> 
 
    <img alt="portret-člana-ekipe" class="ekipa-li-headshot" src="http://lorempixel.com/100/100/"> 
 
    <div> 
 
    <p> 
 
     Nam erat mi, ullamcorper at blandit in, lacinia at magna. Suspendisse sit amet dapibus justo. Nam finibus nibh at viverra vehicula. Mauris posuere ac dui nec sollicitudin. Sed varius sed justo in elementum. Aliquam euismod nisl et massa fermentum tempus. Suspendisse et efficitur metus. Donec eleifend mi consequat libero semper mattis. 
 
    </p> 
 
    </div> 
 
</div> 
 

 
<div class="flex"> 
 
    <div> 
 
    <img alt="portret-člana-ekipe" class="ekipa-li-headshot" src="http://lorempixel.com/100/100/"> 
 
    </div> 
 
    <div> 
 
    <p> 
 
     Nam erat mi, ullamcorper at blandit in, lacinia at magna. Suspendisse sit amet dapibus justo. Nam finibus nibh at viverra vehicula. Mauris posuere ac dui nec sollicitudin. Sed varius sed justo in elementum. Aliquam euismod nisl et massa fermentum tempus. Suspendisse et efficitur metus. Donec eleifend mi consequat libero semper mattis. 
 
    </p> 
 
    </div> 
 
</div>