Radyo düğmesi arka planı, -webkit-backface-visibility kullanılırken Windows Chrome'da beyaz renk alır. Herhangi bir geçici çözüm var mı?

Question

Windows Chrome'da, bir ebeveynin her ikisi de belge akışının dışında olduğunda ve -webkit-backface-visibility uygulandığında, bir radyo düğmesinin arka planının beyaza dönüşmesini sağlayan bir hata var.

İşte eylem: Ben WebKit geçiş titreşim hata etrafında almak için -webkit-backface-visiblity: hidden kullanıyorum http://jsfiddle.net/misterkeg/uMajC/

. Bunun yerine -webkit-transform: translateZ(0) düzeltme kullanırsanız

da bu sorun oluşur, yüzden donanım hızlandırma etkin olduğunda tekme görünüyor. giriş en -webkit-backface-visibilityvisible ya yardımcı olmuyor geçersiz kılma

.

Bunun için bilinen bir çözüm var mı? Bir Chromium bug başvurdum ama bu arada herhangi bir yolu olup olmadığını bilmek istiyorum.

Answer 1

Aynı sorun ancak farklı bir bağlamda bulduk, bu yüzden -webkit-arka yüz-visiblity ile ancak şeylerin birkaç kombinasyonları ile ilgili bir sorun değil olabilir. Benim durumumda, radyo düğmeli sayfanın google harita benzeri haritalar içerdiği (tescilli olan, haritanın tam olarak neye yol açtığını bulamadım) ve bir iframe içinde görüntülenmesi sorunu ortaya çıkar. Haritayı müfettişle gizlerseniz, radyo düğmeleri ok görünür veya iframe içinde değil, doğrudan sayfayı görürsem.

buldum tek geçici çözüm CSS ninja Bu sayfada yer: http://www.thecssninja.com/css/custom-inputs-using-css.

Özetle

, bu (Sözünü ettiğim sayfadan bağlantı bir canlı tanıtım, http://www.thecssninja.com/demo/css_custom-forms/ yoktur) çözümdür:

HTML

<label for="input1" class="radio_image"> 
<input type="radio" name="input" id="input1" /> 
<span>Option 1</span> 
</label> 

CSS

/*we hide the real radio button*/ 
.radio_image input[type=radio] { 
    position:absolute;opacity:0; 
} 
/*we assign the span a background image 
    which is a capture of the actual radio button*/ 
.radio_image input[type=radio] + span { 
    background-image: url("radio-button.gif"); 
    background-position: left top; 
    background-repeat: no-repeat; 
    padding-left: 1.6em; 
} 
/*if radio is checked we change the background 
    image to one with a checked radio button (it can be 
    done with a sprite type background too): */ 
.radio_image input[type=radio]:checked + span { 
    background-image: url("radio-button-checked.gif"); 
} 

Açıklık etiketi içerisindeyken, üzerine tıklamak cl ile aynı etkiye sahip olacaktır. radyo düğmesinin kendisini dinlerken, radyo düğmesi hala çalışıyor. Bir developement ortamında çalışıyorum

yüzden sana url sonrası veremeyiz ama kod ve bağlantılar ile bunu görmek kolay düşünüyorum yukarıda. Ben sadece basit bir radyo düğmesini işlemek için böyle karmaşık bir şekilde sevmiyorum, Can you target Google Chrome?

Ben yardımcı olur umarım: yalnızca Chrome'u hedeflemek istiyorsanız

, bu yazı sağlanan çözüm deneyebilirsiniz Benim durumumda sitemde bu sorunu olan tek sayfada kullandım ve iyi çalıştı.

Answer 2

İşte görüntüler (ne de radyo css düzenlemeleri) kullanmıyorsa alternatif bir çözümdür. radyo düğmesine etrafında yuvarlak beyaz daire içinde çözüm sonuçları (tasarım olduğunu tahammül varsa) bu deneyin:

html:

<span class='radioWrap'><input type='radio'...></span> 

css: öyle

.radioWrap{ 
    background-color: white; 
    padding: 4px 3px 1px 4px; 
    border-radius: 10px; 
} 

.

Answer 3

Daha İyi/çıkış görüntüleri kullanmak zorunda çözüm w: bir div

Wrap radyo elemanı ve gizli o div taşması ayarlayın ve 100px için border-radius. Ardından radyo girişini görüntüleme bloğuna ve hiçbir kenar boşluğuna ayarlayın. Bu benim için çalıştı:

Biçimlendirme:

<div class="radio_contain"> 
    <input type="radio" id="r1" name="r1"> 
</div> 

CSS: Ben olduğum bir sitenin bazı diyaloglarda bazı tümünü değil düğmeleri ve radyo düğmeleri benzer sorunları gördüm

.radio_contain { 
    display: inline-block; 
    border-radius: 100px; 
    overflow: hidden; 
    padding: 0; 
} 
.radio_contain input[type="radio"] { 
    display: block; 
    margin: 0; 
}