web-dev-qa-db-fra.com

Bug de Chrome? Contenu ne rendant pas plusieurs colonnes correctement

J'ai ce code:

http://jsfiddle.net/zqdLzya2/

Ce qui est une mise en page simple à 3 colonnes morte.

Lorsque vous survolez un élément, certains d'entre eux clignotent ou disparaissent pendant une seconde. De plus, lorsque le contenu augmente, il survole le titre, disparaît et rend bien le rendu. Certains clignotements se produisent également lorsque vous faites défiler. Le contenu est bien affiché mais ne s'affiche pas.

Mise à jour 1

Les éléments cessent de clignoter lorsqu'il n'y a ni CSS transition ni transform.

Mise à jour 2

Les éléments cessent de clignoter ou de faire des choses folles en l'absence de transform. J'ai donc supprimé le bouton en savoir plus .

Mise à jour 3

Un bug a été signalé ici: https://code.google.com/p/chromium/issues/detail?id=460222

J'ai essayé le même code sur Opera, Firefox et Safari et ils semblent tous rendre bien.

Est-ce un bug de Chrome?

Voici quelques captures d'écran: How it should workHow chrome renders the content sometimes when you scroll or hover

Voici mon code HTML nu:

<div id="news" class="span-image-title clear content-wrapper">

        <!-- this element repeats -->
        <div class="item">

            <div class="desc bgwhite pdd">
                <h4 class="title-font lightblue">[title goes could be one line title or five]</h4>
                <p class="text-color">2th of January, 2015</p>
            </div>

            <div class="image" style="background-image:url('[image go here, changes with each item]');"></div>

            <div class="desc-body">
                <div class="table-wrap">
                    <div class="table-cell">
                        <div class="entry-content pdd">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, debitis.</p>
                        </div>
                        <a href="#" class="blue-btn title-font uppercase lightblue inline-block">Read More</a>
                    </div>

                </div>
            </div>

        </div>
       <!--    this elements repeat -->


</div>

Voici mon code SCSS:

@mixin break-inside($content){
break-inside:                   $content;
-webkit-column-break-inside:    $content;
}


@mixin columns($count: 3, $gap: 10){

-webkit-column-count: $count;
-moz-column-count:    $count;
column-count:         $count;

-webkit-column-gap:   $gap;
-moz-column-gap:      $gap;
column-gap:           $gap;

}

.span-image-title {

@include columns(3,1rem);

.item { 
    @include break-inside(avoid);
    display: inline-block;
    position:relative; 
    overflow: hidden;
    width:100%; 
    margin-bottom:rem(15px); 
}

.item:hover {
    .desc-body {
        @include transition( 0.6s ease bottom , 0.3s ease background-color 0.2s );
        bottom:0;
        background-color:#f4f4f4;
    }
    .desc {
        // @include transition( 0.3s ease border-bottom 0.5s );
        // border-bottom:1px solid $text-color;
    }
    .entry-content,
    .blue-btn {
        opacity: 1;
    }
}

.image {
    height:370px;
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.desc {
    position: relative;
    z-index:5;
    // border-bottom:1px solid transparent;
}

.entry-content,
.blue-btn {
    @include transition( 0.5s ease opacity 0.3s , 0.3s ease transform );
    opacity: 0;
}

.desc-body {
    @include transition( 0.6s ease bottom , 0.3s ease background-color );
    margin:0 auto;
    bottom:-100%;
    position: absolute;
    width:100%;
    height:100%;
    margin:0 auto;
    background-color:rgba(255,255,255,0.4);

}


}

J'utilise: Version 40.0.2214.111 (64 bits) sur Yosemite.

javascripthtmlcssgoogle-chrome
19
Miguel Garrido

La solution temporaire pour cela consistait à ajouter transform: translateZ(0) à mon élément .item car cela active l'accélération matérielle.

23
Miguel Garrido

Ce n'est pas vraiment une réponse au bogue particulier décrit ici (contenu clignotant/en train de disparaître), mais il est étroitement lié.

J'aidais un ami qui manipulait des colonnes mal alignées dans Chrome/Safari. Il y avait trois colonnes et la troisième avait un espace fantôme au-dessus. Lorsque nous avons essayé de transformer: translateZ (0) et d’autres solutions de transformation null, le contenu a fait a disparu, ce qui a été supprimé.

À un moment donné, il a mentionné avoir eu l'idée que quelqu'un avait peut-être tapé quelque chose dans l'espace du système de gestion de contenu (CMS), ce qui m'a fait penser à l'espace blanc, au word-wrap, etc. Nous avons essayé l'espace blanc: nowrap, puis le blanc : normal sur les enfants, et diverses autres solutions connexes, mais elles n’ont pas fonctionné.

Il a ensuite eu l’idée de placer une marge négative sur la troisième colonne uniquement dans Chrome/Safari, ce qui a conduit à la découverte de cette propriété dont je n’avais jamais entendu parler, et de cette solution délirante: -webkit-margin -top-collapse: jeter .

J'espère que cela aidera un pauvre âme un jour.

1
suigeneris

Il semble que l'ajout de position: relative aux éléments enfants transformés ait un peu aidé, en plus de transform: translateZ(0) à l'élément parent. Encore quelques artefacts dans les transitions cependant ... Bug très étrange!

0
Nico Prat

transform: translateZ(0); fonctionne comme suggéré par Miguel Garrido. Cependant, cela crée un problème d'éléments position: absolute; qui se chevauchent/qui se chevauchent (si c'est un mot).

Utiliser transform-style: preserve-3d; élimine ce problème. J'espère que cela aidera quelqu'un d'autre jusqu'à ce que les navigateurs le corrigent eux-mêmes.

0
Nikhil Girraj