Chrome中的CSS溢出滚动问题答案

【问题标题】：CSS Overflow scroll issue in ChromeChrome中的CSS溢出滚动问题
【发布时间】：2018-09-30 11:36:12
【问题描述】：

我已经设法让“翻盖”背面的内容滚动 - 它在 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");
    });
  }
})();

【问题讨论】：

我在 JSBin 中重新创建了您的项目，它似乎在 Chrome 和 Firefox 中都可以正常工作。图像翻转以显示带有可滚动文本的灰色背景：jsbin.com/heqisanuva/edit?html,css,js,output - 这对您来说是否正确？
谢谢索尼娅 - 是的，这是正确的。我不确定我的问题是什么。我已经浏览了每一段代码，但找不到它在我的浏览器中不起作用的原因。我不认为这是我电脑上的东西，因为我在另一台电脑上检查过它，它正在做同样的事情

标签： css google-chrome overflow

【解决方案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;
    }

【讨论】：