Nền nút radio chuyển sang màu trắng trong Windows Chrome khi sử dụng khả năng hiển thị -webkit-backface. Bất kỳ cách giải quyết nào?

Question

Có một lỗi trong Windows Chrome làm cho nền của nút radio chuyển sang màu trắng khi bố cục của nó vừa ra khỏi luồng tài liệu và đã áp dụng -webkit-backface-visibility.

Đây là nó trong hành động: http://jsfiddle.net/misterkeg/uMajC/

Tôi đang sử dụng -webkit-backface-visiblity: hidden để có được xung quanh nhấp nháy lỗi chuyển WebKit.

Vấn đề này cũng xảy ra nếu tôi sử dụng sửa lỗi -webkit-transform: translateZ(0) thay vào đó, vì vậy có vẻ như sẽ khởi động bất cứ khi nào tăng tốc phần cứng đang hoạt động.

Ghi đè số nhập -webkit-backface-visibility đến visible cũng không giúp ích gì.

Có cách giải quyết nào cho vấn đề này không? Tôi đã nộp Chromium bug nhưng muốn biết nếu có bất kỳ cách nào xung quanh nó trong thời gian chờ đợi.

Answer 1

Tôi đã tìm thấy cùng một vấn đề nhưng trong ngữ cảnh khác nhau, do đó có thể không phải là vấn đề với khả năng hiển thị -webkit-backface nhưng có nhiều sự kết hợp của mọi thứ. Trong trường hợp của tôi, vấn đề phát sinh khi trang có nút radio chứa bản đồ google như bản đồ (bản đồ propietary, tôi không tìm thấy chính xác bản đồ gây ra vấn đề gì) và được hiển thị bên trong iframe. Nếu tôi ẩn bản đồ với thanh tra, các nút radio sẽ ổn, hoặc nếu tôi xem trực tiếp trang, không phải bên trong khung nội tuyến.

Cách giải quyết duy nhất tôi tìm thấy nằm trong trang này từ CSS ninja: http://www.thecssninja.com/css/custom-inputs-using-css.

Nói tóm lại, đây là giải pháp (có một bản demo trực tiếp liên kết từ các trang tôi đã đề cập, http://www.thecssninja.com/demo/css_custom-forms/):

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"); 
} 

Khi khoảng nằm bên trong nhãn, nhấp vào nó sẽ có tác dụng tương tự như cl icking trên nút radio chính nó, do đó, nút radio vẫn hoạt động ok.

Tôi đang làm việc trong môi trường phát triển để tôi không thể đăng url cho bạn, nhưng với mã và các liên kết ở trên, tôi nghĩ rằng bạn dễ dàng thấy.

Nếu bạn muốn nhắm mục tiêu chỉ Chrome, bạn có thể thử các giải pháp cung cấp trong bài viết này: Can you target Google Chrome?

Tôi hy vọng nó giúp, tôi không thích như vậy một cách phức tạp để làm cho chỉ một nút radio đơn giản, trong trường hợp của tôi, tôi đã sử dụng nó trong trang duy nhất có vấn đề đó trong trang web của tôi và nó đã làm việc tốt.

Answer 2

Đây là giải pháp thay thế không sử dụng hình ảnh (cũng như chỉnh sửa css radio). Kết quả giải pháp trong một vòng tròn tròn màu trắng xung quanh nút radio (nếu thiết kế của bạn có thể chịu đựng điều đó) thử này:

html:

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

css:

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

Đó là nó. giải pháp

Answer 3

Better w/ra có sử dụng hình ảnh:

Bó yếu tố radio trong một div, và thiết lập tràn của div đó để ẩn, và border-radius để 100px. Sau đó đặt đầu vào radio để hiển thị khối và không có lề. Điều này làm việc cho tôi:

Markup:

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

CSS:

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