Question

我一直试图找到这种奇怪行为的来源，但到目前为止还不幸运。

我的问题：

在chrome中（它在firefox中运行正常），当我将鼠标悬停在3x2图像（like in this test page）网格中的第一个图像上时，图像和有时周围的背景图像在翻译时会消失。完成后，图像重新出现。这只发生在chrome中，同时向下滚过特定点（测试只是向下滚动）。

到目前为止，我找到的唯一解决方案是完全关闭翻译，这不是理想的，而是最后的手段。

任何人都可以告诉我，如果我做错了吗？

HTML ：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="SHIELD - Free Bootstrap 3 Theme">
        <meta name="author" content="Carlos Alvarez - Alvarez.is - blacktie.co">
        <title>Peter Streef</title>
        <!-- Bootstrap core CSS -->
        <link href="test/assets/css/bootstrap.css" rel="stylesheet">
        <!-- Custom styles for this template -->
        <link href="test/assets/css/main.css" rel="stylesheet">
        <link rel="stylesheet" href="test/assets/css/icomoon.css">
        <link href="test/assets/css/animate-custom.css" rel="stylesheet">
        <link rel="icon" type="image/png" href="test/assets/img/favicon.png">
        <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Raleway:400,300,700' rel='stylesheet' type='text/css'>
        <script src="test/assets/js/jquery.min.js"></script>
        <script type="text/javascript" src="test/assets/js/modernizr.custom.js"></script>
        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
            <script src="test/assets/js/html5shiv.js"></script>
            <script src="test/assets/js/respond.min.js"></script>
        <![endif]-->
    </head>
    <body data-spy="scroll" data-offset="0" data-target="#navbar-main">
        <!-- ==== SECTION DIVIDER2 ==== -->
        <section id="photography" class="section-divider textdivider divider2">
            <div class="container">
                <h1>Photography</h1>
                <hr>
            </div>
            <!-- container -->
        </section>
        <!-- section -->
        <!-- ==== photography ==== -->
        <div class="container" >
            <br>
            <div class="row">
                <br>
                <h1 class="centered">Photos I made</h1>
                <hr>
                <br>
                <br>
            </div>
            <!-- /row -->
            <div id="photography_row" class="row"></div>
            <!-- /row -->
            <br>
            <br>
        </div>
        <!-- /container -->
        <script>
            $(document).ready (function () {
                $.ajax ({
                    type: 'GET',
                    url: 'show_photos_test.php',
                    data: '',
                    success: function (msg) {
                        if (msg) {
                            document.getElementById("photography_row").innerHTML = msg;
                        }
                        else {
                            document.getElementById("photography_row").innerHTML = "Error in loading photos.";
                        }
                    }
                });
            });
        </script>
        <script type="text/javascript" src="test/assets/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="test/assets/js/retina.js"></script>
        <script type="text/javascript" src="test/assets/js/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="test/assets/js/smoothscroll.js"></script>
        <script type="text/javascript" src="test/assets/js/jquery-func.js"></script>
    </body>
</html>

（部分）PHP / HTML ：

foreach($photos as $photo)
{
$newTitle = wordwrap($photo['title'], 20, "<br />\n");
?>
    <!-- PORTFOLIO IMAGE 1 -->
    <div class="col-md-4 ">
        <div class="grid mask">
            <figure>
                <img class="img-responsive" src="<?php echo($assets_folder.$photo['image']);?>" alt="">
                <figcaption>
                    <h5><?php echo($newTitle);?></h5>
                    <a data-toggle="modal" href="#photo_modal_<?php echo($photo['id']);?>" class="btn btn-primary btn-lg">Read more</a>
                </figcaption><!-- /figcaption -->
            </figure><!-- /figure -->
        </div><!-- /grid-mask -->
    </div><!-- /col -->


     <!-- MODAL SHOW THE PORTFOLIO IMAGE. In this demo, all links point to this modal. You should create
          a modal for each of your projects. -->

    <div class="modal fade" id="photo_modal_<?php echo($photo['id']);?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title"><?php echo($photo['title']);?></h4>
          </div>
          <div class="modal-body">
            <p><img class="img-responsive" src="<?php echo($assets_folder.$photo['image']);?>" alt=""></p>
            <p><?php echo($photo['description']);?></p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <?php
}

所需行为的CSS ：

.no-touch .mask figure img {
    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    transition: transform 0.4s;
}
/*@PS added for touch 
.no-touch & no hover and .touch added
*/
.touch .mask figure img
{
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
}

.no-touch .mask figure:hover img,
.mask figure.cs-hover img {
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px);
}

.no-touch  .mask figcaption {
    height: 50px;
    width: 100%;
    top: auto;
    bottom: 0;
    opacity: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
    -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
    transition: transform 0.4s, opacity 0.1s 0.3s;
}

.touch .mask figcaption {
    height: 50px;
    width: 100%;
    top: auto;
    bottom: 0;
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}

.no-touch .mask figure:hover figcaption,
.mask figure.cs-hover figcaption {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
    -moz-transition: -moz-transform 0.4s, opacity 0.1s;
    transition: transform 0.4s, opacity 0.1s;
}

.mask figcaption a {
    position: absolute;
    top:10px;
    bottom: 10px;
    right: 30px;
}

Answer 1

取消position: relative;上.grid figure img选择器中的main.css：

.grid figure img {
    width: 100%;
    display: block;
    /* position: relative; */
}

它会正常工作，假设其默认值为：position: static;。

Answer 2

如果要打印许多大图像，则可以在加载图像之前尝试使用css控制布局。你可以编写类似的脚本：

<script>
jQuery(document).ready(function($) {

    $(".preload").each(loadImages);

    function loadImages (i, elem) {

        var numItems = $('.preload').length;
        for (var i = 0; i < numItems; i++) {

            $("#img" + i).each(function(){
                var thisSource = $(this).data('src');
                $(this).html('<img src="' + thisSource + '" alt=""/>');
            });
        }

    }
});
</script>


<span id="img1" class="preload" data-src="images/portfolio1.jpg"></span>
<span id="img2" class="preload" data-src="images/portfolio2.jpg"></span>

我们的想法是在插入图像之前完成布局css。有很多方法可以做到这一点，但你需要以某种方式管理你的图像加载。

在网格引导程序中悬停第一个图像时，图像消失（仅限铬）

2 个答案: