Question

我已经设法将内容放在“flipbox”的反面进行滚动 - 它可以在Firefox中运行，但它在Chrome中不起作用。 Chrome中出现的问题是，不会显示翻盖的前部，而是显示翻盖背面的镜像图像。

“staffContent”是需要滚动的div，OVERFLOW属性导致问题。

感谢您的帮助 - 我是一个新闻！卡利

/ * === CSS ========================================= ===================== * /

/* === FLIP BOX =============*/
.card {
    position: relative;
    padding-top: 25%;
    padding-bottom: 25%;
    width: 100%;
    text-align: center;
    margin-top: 25px;
    margin-bottom: 100px;
    min-height: 320px;
    overflow: hidden;
    }


.card__front img{
    position:absolute;
    left: 50%;
    transform: translateX(-50%);
    min-width: 100%;
     }

/* card fronts and backs */
.card__front,
.card__back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

}


.card__front,
.card__back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}

.card__front {
  background-color: black;
     text-align: center;
    }

.card__back {
  background-color: #89868a;
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}


/* click effect */
.card.effect__click.flipped .card__front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card.effect__click.flipped .card__back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}


/* === STAFF PROFILES =============*/

.staff {
    text-align: center;
    }

.staffName h4 {
    text-transform: uppercase;
    font-family:'Gibson W01';
    font-weight: 600;
    margin-bottom: 0px;
}

.staffName p {
    text-transform: uppercase;
    font-size: 14px;
}



.staffName {
    position: absolute;
    width: 90%;
    height: auto;
    bottom: 0;
    margin-bottom: 40px;
    color: white;
    font-weight: 600;
    z-index: 2000;
    background: none;
    text-align: center;
    text-transform: uppercase;
}

.readMore {
    position: absolute;
    text-align: right;
    bottom: 22px;
    right: 13%;
    color: white;
    font-weight: 600;
    z-index: 1000;
    text-transform: uppercase;
    font-size:12px;
    background: #cd1719;
    border-radius: 3px;
    padding: 4px 10px;
    }

.readMore a, a:hover{
    color: white!important;
    }

.staffLinkedIn {
    position: absolute;
    text-align: center;
    bottom: 22px;
    left: 22px;
    color: white;
    font-weight: 600;
    z-index: 1000;
    font-size: 16px;
    line-height: 30px;
    width: 28px;
    height: 26px;
    border-radius: 3px;
    }



.staffProfile {
    margin-bottom: 15px;
    text-align: left;
    padding: 15px 30px 100px 30px ;
    color: white;
    height: 100%;
    overflow: hidden;
    overflow: scroll;
    }



.staffProfile .entry-content p{
    color: white!important;
}

.staffContent {
padding-bottom: 50px;


}

/ * === HTML / PHP ======================================= =============== * /

<div class="col-md-6 col-centered" > 
                <div class=" staffName gradientHorizontal"><h4><?php the_sub_field('name'); ?></h4><p><?php the_sub_field('title'); ?></p></div>
                    <div class="card effect__click" >
                        <div class="card__front">
                            <?php if( get_sub_field('linked_in') ){ ?>
                                <a class="staffLinkedIn gradientRadial"href="<?php the_sub_field('linked_in'); ?>"  target="_blank" ><i class="fa fa-linkedin"></i></a>
                            <?php } ?>

                            <?php if( $profile_content): ?>
                                    <a class="readMore" href="#/">read more</a>
                            <?php endif; ?>




                            <div class="staffMember ">
                                <img class="align-center"src="<?php the_sub_field('image'); ?>" alt="Image of <?php the_sub_field('name'); ?>">
                            </div>
                        </div>

                        <div class="card__back">
                            <div class="shadow"> </div>
                            <div class="staffProfile gradientVerticleGreySolid">


                                <div class="staffContent">
                                        <h4><?php the_sub_field('name'); ?></h4>
                                        <h5><?php the_sub_field('title'); ?></h5>
                                        <p><?php the_sub_field('profile_content'); ?></p>
                                </div>


                            </div>
                            <div class="closeButton">X</div>
                        </div>
                      </div> <!-- /card -->
            </div> <!-- /col -->

/ * === JS ========================================= ========== * /

// FLIPBOX ON CLICK
(function() {
  var cards = document.querySelectorAll(".card.effect__click");
  for ( var i  = 0, len = cards.length; i < len; i++ ) {
    var card = cards[i];
    clickListener( card );
  }

  function clickListener(card) {
    card.addEventListener( "click", function() {
      var c = this.classList;
      c.contains("flipped") === true ? c.remove("flipped") : c.add("flipped");
    });
  }
})();

Answer 1

我遇到了同样的问题（添加滚动条溢出时，卡片翻转对FireFox和Safari都适用，不适用于Chrome）。我仔细研究了一下讨论，发现提到的解决方案对我有用：https://github.com/nnattawat/flip/issues/39

.card .front{
    backface-visibility: hidden;
    transform-style: preserve-3d;
    perspective: inherit;
    position: absolute;
    z-index: 1;
    }

Chrome中的CSS溢出滚动问题

1 个答案: