css - Radio knap baggrunden bliver hvid i Windows Chrome, når du bruger -webkit-backface-synlighed. Eventuelle løsninger?

Indlæg af Hanne Mølgaard Plasc

Problem



Der er en fejl i Windows Chrome, der gør en radioknapps baggrund til at blive hvid, når dens forælder er både ud af dokumentflowet og har -webkit-backface-visibility anvendt.


Her er det i aktion:
http://jsfiddle.net/misterkeg/uMajC/[12]


Jeg bruger -webkit-backface-visiblity: hidden til at komme rundt i WebKit-overgangen flimmer bug.


Dette problem opstår også, hvis jeg bruger -webkit-transform: translateZ(0) fix i stedet, så det ser ud til at sparke ind, når hardware acceleration er aktiv.


Overstyring af indtastningen 's -webkit-backface-visibility til visible hjælper heller ikke.


Er der nogen kendte løsninger på dette? Jeg har indgivet en Chromibug, men vil gerne vide, om der er nogen måder omkring det i mellemtiden. [13]

Bedste reference


Jeg har fundet det samme problem, men i forskellige sammenhænge kan det være, at det ikke er et problem med -webkit-backface-visiblity men med flere kombinationer af ting. I mit tilfælde opstår problemet, når siden med radioknapperne indeholder en google kort som kort (en propietær, jeg har ikke fundet, hvad der præcist i kortet forårsager problemet) og vises i en iframe.
Hvis jeg skjuler kortet med inspektøren, ser radioknapperne ud ok, eller hvis jeg ser siden direkte, ikke inde i iframe.


Den eneste løsning jeg har fundet er på denne side fra CSS ninja: http://www.thecssninja.com/css/custom-inputs-using-css.[14]


Sammenfattende er dette løsningen (der er en live demo linket fra siden jeg har nævnt http://www.thecssninja.com/demo/css\_custom-forms/):[15]


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


Da spændingen er inde i etiketten, vil klik på den have den samme effekt som at klikke på selve radioknappen, så radio knappen fungerer stadig ok.


Jeg arbejder i en udvikling miljø, så jeg kan ikke poste dig url, men med koden og ovenstående links synes jeg det er let at se.


Hvis du kun vil målrette mod Chrome, kan du prøve løsningen i dette indlæg:
Kan du målrette Google Chrome?


Jeg håber det hjælper, jeg kan ikke lide en sådan kompliceret måde at gøre en simpel radioknap, i mit tilfælde har jeg brugt det på den eneste side, der har det problem på mit websted, og det har fungeret fint.

Andre referencer 1


Bedre løsning uden brug af billeder:


Indsæt radioelementet i en div, og indstil div'ens overløb til skjult og grænseradius til 100px. Indstil derefter radioindgangen til displayblokken og ingen margen. Dette fungerede for mig:


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

Andre referencer 2


Her er en alternativ løsning, der ikke bruger billeder (eller radio css redigeringer).
Løsningen resulterer i en rund, hvid cirkel rundt på radioknappen (hvis dit design kan tolerere det) Prøv dette:


html:


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


css:


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


Det er det.