Фон переключателя становится белым в Windows Chrome при использовании -webkit-backface-visibility.Есть обходные пути? - PullRequest
Новая
       13

Фон переключателя становится белым в Windows Chrome при использовании -webkit-backface-visibility.Есть обходные пути?

7 голосов
/ 23 марта 2012

В Windows Chrome есть ошибка, из-за которой фон переключателя становится белым, когда его родитель находится вне потока документов и к нему применено -webkit-backface-visibility.

Вот оно в действии: http://jsfiddle.net/misterkeg/uMajC/

Я использую -webkit-backface-visiblity: hidden, чтобы обойти ошибку мерцания перехода WebKit.

Эта проблема также возникает, если я вместо этого использую исправление -webkit-transform: translateZ(0), поэтому оно срабатывает при активном аппаратном ускорении.

Отмена ввода -webkit-backface-visibility на visible тоже не помогает.

Есть ли какие-нибудь известные обходные пути к этому? Я подал Chromium bug , но хотел бы знать, есть ли какие-то способы обойти это.

Ответы [ 3 ]

11 голосов
/ 18 мая 2012

Я обнаружил ту же проблему, но в другом контексте, поэтому, возможно, это не проблема с -webkit-backface-visiblity, а с несколькими комбинациями вещей. В моем случае проблема возникает, когда страница с переключателями содержит гугл-карты, такие как карта (проприетарная, я не нашел, что именно на карте вызывает проблему) и отображается внутри фрейма. Если я скрываю карту с помощью инспектора, переключатели выглядят нормально, или если я просматриваю страницу напрямую, а не внутри фрейма.

Единственный обходной путь, который я нашел, находится на этой странице от ниндзя CSS: http://www.thecssninja.com/css/custom-inputs-using-css.

Таким образом, это решение (есть демоверсия, ссылка на которую я упомянул, 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");
}

Поскольку диапазон находится внутри метки, нажатие на него будет иметь тот же эффект, что и нажатие на саму кнопку-переключатель, поэтому переключатель все еще работает нормально.

Я работаю в среде разработки, поэтому не могу опубликовать вам URL, но с кодом и ссылками выше, я думаю, это легко увидеть.

Если вы хотите настроить таргетинг только на Chrome, вы можете попробовать решение, представленное в этом посте: Можете ли вы настроить таргетинг на Google Chrome?

Надеюсь, это поможет, мне не нравится такой сложный способ рендеринга, просто простая радиокнопка, в моем случае я использовал его на единственной странице с такой проблемой на моем сайте, и она работала нормально.

2 голосов
/ 07 августа 2013

Лучшее решение без использования изображений:

Оберните радиоэлемент в div и установите переполнение этого div на скрытый, а border-radius - 100px. Затем установите радиовход для отображения блока, а не поля. Это сработало для меня:

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;
}
1 голос
/ 13 мая 2013

Вот альтернативное решение, которое не использует изображения (и не редактирует радио CSS). Решение приводит к круглому белому кругу вокруг переключателя (если ваш дизайн может это терпеть), попробуйте это:

HTML: 

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

CSS: 

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

Вот и все.

...