Elemente mit Deckkraft <1 wird nicht in Chrom gerendert, wenn nicht in der ersten Spalte

Ich habe eine Website, die in mehrere Spalten aufgeteilt wird. Wenn sich ein Element nicht in der ersten Spalte befindet und die Deckkraft auf < 1 eingestellt ist, wird es nicht gerendert, wenn sein Container sowohl die Eigenschaften für den Überlauf y als auch den Randradius aufweist.Elemente mit Deckkraft <1 wird nicht in Chrom gerendert, wenn nicht in der ersten Spalte

Shown in this fiddle

css

.main { 
    -webkit-column-width: 100px; 
    column-width: 100px; 
    max-height: 200px; 
} 

.main > div { 
    overflow-y:auto; 
    border-radius: 6px; 
} 
.opac { 
    opacity: 0.5; 
}

html

<div class="main"> 
    <div> 
     <div class="opac">element 1</div> 
    </div> 
    <div> 
     <div class="opac">element 2</div> 
    </div> 
    ... 
    <div> 
     <div class="opac">element 30</div> 
    </div> 
</div>

Ich bin Chrom mit 40.0.2214.94 (64-Bit) auf OSX 10.10.1. Funktioniert in Firefox.

Quelle

2015-01-30 David Rice

Das ist verrückt. Klingt wie du solltest es als Fehler melden. –

Ja, das sieht nach einem Rendering-Fehler aus. Ich reproduzierte es in Canary 42.0.2291.0 auf OSX. Sie sollten nach bekannten Problemen suchen und diese gegebenenfalls auf crbug.com anfragen. – joews

Okay, hier eingereicht https://code.google.com/p/chromium/issues/detail?can=2&start=0&num=100&q=column-width% 20opacity & colspec = ID% 20Pri% 20M% 20Woche% 20ReleaseBlock% 20Cr% 20Status% 20Owner% 20Summary% 20OS% 20Modifiziert & groupby = & sort = & id = 453933 –

Da die issue in chrome scheint nicht wie es wird in kürzester Zeit behoben werden und die will-change: opacity Fix nicht Zeiger/Klick Ereignisse, ich habe beschlossen, einfach zu berechnen, was der rgb-Werte mit der gewünschten Deckkraft wäre und hart in CSS codieren.

Ich verwendete die Opazität für deaktivierte Schaltflächen und verwendete nur einige der Bootstrap-Schaltflächen für diesen speziellen Fall, so dass es nicht zu schlecht für einen Hack ist.

.btn.btn-success[disabled] { 
    opacity: 1; 
    background: rgb(141, 194, 141); 
} 
.btn.btn-info[disabled] { 
    opacity: 1; 
    background: rgb(120, 187, 206); 
}

Quelle

2015-03-15 19:22:17

Das sieht wie ein Rendering-Fehler aus. Denn jetzt können Sie den Effekt abzumildern, indem will-change: opacity an die übergeordnete Elemente anwenden:

.main > div { 
    overflow-y:auto; 
    border-radius: 6px; 
    will-change: opacity; 
}

http://jsfiddle.net/yx1cp9f8/

Quelle

2015-01-30 20:51:19 joews

yup, das hat es behoben. Ich wusste nie von dieser Eigenschaft, also danke! Ich habe einen Fehlerbericht eingereicht, der hoffentlich in Zukunft nicht behoben werden muss. –

Obwohl Hover Stylings immer noch nicht funktionieren, wenn Sie die Breite des Browserfensters reduzieren und dann erneut erweitern. Wie Tags zeigen nicht den Zeiger Cursor oder unterstreichen sich selbst (http://jsfiddle.net/tnyj3mtc/3/). Aber wenigstens tauchen sie auf. –

Oder klicken Sie auf Ereignisse, damit die Schaltflächen nicht funktionieren. –

Anther Abhilfe offenbar ist die Opazität auf das übergeordnete Element zu setzen:

<div class="main"> 
<div class="opac"> 
    <div >element 1</div> 
</div> 
<div class="opac"> 
    <div >element 2</div> 
</div> 
... 
<div class="opac"> 
    <div >element 30</div> 
</div>

Scheint zu arbeiten. (Sie scheinen vergessen zu haben, Ihre Divs zu schließen, also habe ich das auch getan)

Quelle

2015-01-30 20:55:02 chris

Ich vermute, dass alles, was dazu führt, dass das Elternelement auf seine eigene Ebene hochgestuft wird, dies tut. – joews

oops, yah vergessen, sie beim Kopieren von jsfiddle zu schließen. Jetzt behoben. Das Styling des Elternteils ist für mich nicht möglich, da die tatsächliche Seite etwas komplizierter ist. –

Elemente mit Deckkraft <1 wird nicht in Chrom gerendert, wenn nicht in der ersten Spalte

Antwort

Verwandte Themen