wake-up-neo.com

Chrome-Fehler? Inhalt rendert mehrspaltig nicht richtig

Ich habe diesen Code:

http://jsfiddle.net/zqdLzya2/

Welches ist ein ganz einfaches 3-Spalten-Layout.

Wenn Sie mit der Maus über ein Objekt fahren, blinken einige davon oder verschwinden für eine Sekunde. Auch wenn der Inhalt nach oben verschoben wird, überschreitet er den Titel, verschwindet und wird gut gerendert. Beim Scrollen tritt auch ein Blinken auf. Der Inhalt wird gut angezeigt, aber nicht gerendert.


Update 1

Elemente hören auf zu blinken, wenn kein CSS transition oder transform vorhanden ist.


Update 2

Elemente hören auf zu blinken oder tun etwas Verrücktes, wenn es keine transform gibt. Deshalb habe ich die Schaltfläche read more entfernt.


Update 3

Hier wurde ein Fehler gemeldet: https://code.google.com/p/chromium/issues/detail?id=460222


Ich habe den gleichen Code unter Opera, Firefox und Safari ausprobiert und sie scheinen alle in Ordnung zu sein.

Ist das ein Chrome-Bug?

Hier einige Screenshots: How it should workHow chrome renders the content sometimes when you scroll or hover

Hier ist mein nackter HTML-Code:

<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>

Hier ist mein SCSS-Code:

@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);

}


}

Ich verwende: Version 40.0.2214.111 (64-Bit) auf Yosemite.

19
Miguel Garrido

Die vorübergehende Lösung hierfür war das Hinzufügen von transform: translateZ(0) zu meinem .item-Element, um die Hardwarebeschleunigung zu ermöglichen.

23
Miguel Garrido

Dies ist keine wirkliche Antwort auf den hier beschriebenen Fehler (blinkender/verschwindender Inhalt), aber es ist eng verwandt.

Ich habe einem Freund beim Umgang mit falsch ausgerichteten Spalten in Chrome/Safari geholfen. Es gab drei Säulen und die dritte hatte einen Phantomraum darüber. Als wir transform: translateZ (0) und andere Nulltransformationslösungen ausprobiert haben, ist der Inhalt did verschwunden, das war also raus.

Irgendwann erwähnte er, dass er auf die Idee gekommen war, dass vielleicht jemand etwas in das Leerzeichen im CMS eingegeben hatte und dass ich über Leerzeichen, Zeilenumbruch usw. nachdachte. Wir versuchten es mit Leerzeichen: Nowrap und dann mit Leerzeichen : normal auf die Kinder und verschiedene andere verwandte Lösungen, aber sie haben nicht geklappt.

Dann hatte er die Idee, einen negativen Rand für die dritte Spalte div nur in Chrome/Safari einzufügen, und das führte zu unserer Entdeckung dieser Eigenschaft, von der ich noch nie gehört habe, und dieser verrückten Lösung: -webkit-margin -top-collapse: verwerfen .

Hoffe, dies hilft einer armen Seele eines Tages.

1
suigeneris

Sieht so aus, als ob das Hinzufügen von position: relative zu den transformierten untergeordneten Elementen ein wenig geholfen hat, zusätzlich zu transform: translateZ(0) zum übergeordneten Element. Trotzdem einige Artefakte in Übergängen ... Sehr seltsamer Bug!

0
Nico Prat

transform: translateZ(0); funktioniert wie von Miguel Garrido vorgeschlagen. Es entsteht jedoch das Problem, dass sich position: absolute; -Elemente überlappen/unterlappen (wenn dies ein Word ist).

Durch die Verwendung von transform-style: preserve-3d; wird dieses Problem behoben. Hoffe, das hilft jemand anderem, bis die Browser es selbst reparieren.

0
Nikhil Girraj