Safari で div の高さを移行するのが難しい。FF、Chrome、IE で見栄えがします。最初は問題なく移行できますが (バグがあります)、逆に移行して元に戻ります。
div は height: 0 から始まり、ホバー時に height: 115px に移行します。0 に戻りますが、上部が下部から成長するのではありません。上部は展開された位置にとどまり、下部はそれに合わせて収縮します。
もう1つ、これは順序付けられていないリストであり、トランジションは各liにあります。エラーは、最後にliにカーソルを合わせたときにのみ発生するようです。
試験会場はこちら。問題の li は、6 つのポスト ティーザー ボックスです。
CSS トランジションを使用していましたが、jquery に切り替えて問題が解決するかどうかを確認しました。親要素の位置属性と関係があるのだろうか。これがコードです。その中にコピーされたいくつかのワードプレスphpスニペットがあります。
<ul id="post_teasers">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<li>
<div class="looped_post">
<div class="thumbnail_loop">
<?php the_post_thumbnail(); ?>
</div>
<div class="loop_content">
<div class="loop_title">
<div class="title_pad"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php if ( function_exists('the_title_attribute')) the_title_attribute(); else the_title(); ?>"><?php limit_title($post->post_title, 24); ?></a></div>
<div class="teaser_meta">
<?php the_author(); ?>, <?php bp_profile_field_data( array('user_id'=>get_the_author_meta( 'ID' ),'field'=>'Neighborhood' )); ?>
</div>
</div>
<div class="post_expand">
<div class="loop_excerpt">
<?php the_excerpt(); ?>
</div>
</div>
</div>
</div>
</li>
<?php do_action( 'bp_after_blog_post' ); ?>
<?php endwhile; ?>
</ul>
.looped_post {
float: left;
height: 305px;
margin: 0 12px 25px;
overflow: hidden;
position: relative;
width: 255px;
}
.looped_post:after {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: transparent #F2F1DF;
-webkit-border-image: none;
-moz-border-image: none;
border-image: none;
border-style: solid;
border-width: 20px 20px 0 0;
bottom: 0;
content: "";
display: block;
height: 0;
position: absolute;
right: 0;
width: 0;
z-index: 3;
}
.thumbnail_loop {
width: 255px;
height: 200px;
overflow: hidden;
}
.post_expand {
height: 0;
overflow: hidden;
/*
-webkit-transition: all 0.5s ease-out 0s;
-moz-transition: all 0.5s ease-out 0s;
-o-transition: all 0.5s ease-out 0s;
-ms-transition: all 0.5s ease-out 0s;
transition: all 0.5s ease-out 0s;
*/
}
/*
ul#post_teasers li:hover .post_expand {
height: 115px;
}
*/
.loop_content {
background-color: #FFFFFF;
border-top: 4px solid #8A7B67;
bottom: 0;
font-family: noto serif,serif;
position: absolute;
width: 255px;
z-index: 2;
}
.loop_title {
background: none repeat scroll 0 0 #FFFFFF;
height: 110px;
position: relative;
width: 255px;
}
.loop_title a {
color: #3E2711;
font-family: noto serif,serif;
font-size: 27px;
font-weight: normal;
line-height: 30px;
}
.title_pad {
margin-bottom: 0;
padding: 10px 10px 10px 20px;
}
.teaser_meta {
bottom: 15px;
color: #856A4F;
font-size: 14px;
font-style: italic;
padding: 0 0 0 20px;
position: absolute;
}
.loop_excerpt {
background: none repeat scroll 0 0 #FFFFFF;
color: #3E2711;
font-size: 14px;
height: 60px;
overflow: hidden;
padding: 0 20px 20px;
width: 215px;
}
.loop_excerpt p:first-child:first-letter {
float: left;
color: #9FA615;
font-size: 45px;
line-height: 20px;
padding-top: 4px;
padding-right: 0;
padding-left: 0;
font-family: Georgia;
}
<script type="text/javascript">
$(document).ready(function(){
$('ul#post_teasers li').hover(function(){
$(".post_expand", this).stop().animate({height:'115px'},{queue:false,duration:500});
}, function() {
$(".post_expand", this).stop().animate({height:'0px'},{queue:false,duration:500});
});
});
</script>