css - Semantic UI cards height issue (chrome on windows) -


i'm having issue on chrome windows .card items don't seem right height. or little resulting in issue can see in screenshot below. happening on chrome windows far can tell.

platforms issue doesn't happen:

  • internet explorer 11
  • microsoft edge
  • firefox
  • chrome on mac

jsfiddle

screenshot of application

<div class="ui grid stackable container">   <div class="sixteen wide column">     <div class="ui link 5 doubling cards">       <a class="ui card" href="#">         <div class="image">           <img src="http://assets19.pokemon.com/assets/cms2/img/pokedex/full//002.png">         </div>          <div class="content">           <div class="header">ivysaur</div>           <div class="meta">grass</div>           <div class="description">            </div>         </div>         <div class="extra content">           <span><i class="idea icon"></i>pokemon</span>         </div>       </a>       <a class="ui card" href="#">         <div class="image">           <img src="http://assets19.pokemon.com/assets/cms2/img/pokedex/full//004.png">         </div>          <div class="content">           <div class="header">charmander</div>           <div class="meta">fire</div>           <div class="description">            </div>         </div>         <div class="extra content">           <span><i class="idea icon"></i>pokemon</span>         </div>       </a>        ...      </div>   </div> </div> 

i had same problem in production on 1 of my website. bug appears if images not in cache , must downloaded, on chrome, after recent update.

i found commit css-flex used semantic-ui produce cards. bug report details problem , workarounds.
chose add min-height: 0; content of card , worked way should.


Comments

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

ios - UITEXTFIELD InputView Uipicker not working in swift -

Python Pig Latin Translator -