Why do checkboxes move when checked in Safari?

Question

I have a series of values with checkboxes pre-checked on this page. The look and work fine in all browsers, except Safari. When I click on any of the checkboxes they 'jump' or 'drop' down and then move back into position.

I did some research, but I didn't find anything about how to keep the boxes from moving.

Here is the code for the checkbox:

input[type="checkbox"] {
  width: 25px;
  height: 25px;
  -webkit-transform: scale(1.3, 1.3);
  display: inline-block;
  margin-right: 5px;
  border: 1px solid #0070BB;
}

<p><input type="checkbox" class="multiple" value="n" name="n" /><img src="/photos/map/icon_nacelle.png" alt="icon_nacelle" width="25" height="25" /> <span class="filterby">Nacelle<span class="counts" id="n-count"></span></span><br />

  <input type="checkbox" class="multiple" value="b" name="b" /><img src="/photos/map/icon_blade.png" alt="icon_blade" width="25" height="25" /> <span class="filterby">Blade/rotor<span class="counts" id="b-count"></span></span><br />

  <input type="checkbox" class="multiple" value="t" name="t" /><img src="/photos/map/icon_tower.png" alt="icon_tower" width="25" height="25" /> <span class="filterby">Tower<span class="counts" id="t-count"></span></span><br />

  <input type="checkbox" class="multiple" value="f" name="f" /><img src="/photos/map/icon_foundation.png" alt="icon_foundation" width="25" height="25" /> <span class="filterby">Foundation<span class="counts" id="f-count"></span></span><br />

  <input type="checkbox" class="multiple" value="tr" name="tr" /><img src="/photos/map/icon_transmission.png" alt="icon_transmission" width="25" height="25" /> <span class="filterby">Transmission/Electrical<span class="counts" id="tr-count"></span></span><br
  />

  <input type="checkbox" class="multiple" value="o" name="o" /><img src="/photos/map/icon_offshore.png" alt="icon_offshore" width="25" height="25" /> <span class="filterby">Offshore Services<span class="counts" id="o-count"></span></span><br />

  <input type="checkbox" class="multiple" value="p" name="p" /><img src="/photos/map/icon_professional.png" alt="icon_professional" width="25" height="25" /> <span class="filterby">Professional Services<span class="counts" id="p-count"></span></span><br
  />

  <input type="checkbox" class="multiple" value="fi" name="fi" /><img src="/photos/map/icon_field.png" alt="icon_field" width="25" height="25" /> <span class="filterby">Field Services<span class="counts" id="fi-count"></span></span><br />

  <input type="checkbox" class="multiple" value="r" name="r" /><img src="/photos/map/icon_research.png" alt="icon_research" width="25" height="25" /> <span class="filterby">Research/workforce dev<span class="counts" id="r-count"></span></span>
</p>

How do I style the checkboxes so they are stationary and only change state when clicked?

Answer 1

It is because you have set a custom width and height for the check boxes. If you remove the width and height rules from your CSS, the checkboxes stop moving when you check them.

Understanding that you want them to be bigger, look into other ways of customizing check boxes.

here is a common way: http://webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-8953

Answer 2

http://jsfiddle.net/51chuew0/

input[type="checkbox"] { 
 width: 25px; 
    height: 25px;   
    -webkit-transform: scale(1.3);    
	-moz-transform: scale(1.3);
	-o-transform: scale(1.3);
	-ms-transform: scale(1.3);
	transform: scale(1.3);
    display: inline-block;    
    margin-right: 5px; 
    border: 1px solid #0070BB; 
    } 
.matrix {
    -webkit-transform: matrix3d(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); /* safari and chrome */
}

<p>
<div class="matrix"></div>    
<input type="checkbox" class="multiple" value="n" name="n" /><img src="/photos/map/icon_nacelle.png" alt="icon_nacelle" width="25" height="25" /> <span class="filterby">Nacelle<span class="counts" id="n-count"></span></span><br />

<input type="checkbox" class="multiple" value="b" name="b" /><img src="/photos/map/icon_blade.png" alt="icon_blade" width="25" height="25" /> <span class="filterby">Blade/rotor<span class="counts" id="b-count"></span></span><br />

<input type="checkbox" class="multiple" value="t" name="t" /><img src="/photos/map/icon_tower.png" alt="icon_tower" width="25" height="25" /> <span class="filterby">Tower<span class="counts" id="t-count"></span></span><br />

<input type="checkbox" class="multiple" value="f" name="f" /><img src="/photos/map/icon_foundation.png" alt="icon_foundation" width="25" height="25" /> <span class="filterby">Foundation<span class="counts" id="f-count"></span></span><br />

<input type="checkbox" class="multiple" value="tr" name="tr" /><img src="/photos/map/icon_transmission.png" alt="icon_transmission" width="25" height="25" /> <span class="filterby">Transmission/Electrical<span class="counts" id="tr-count"></span></span><br />

<input type="checkbox" class="multiple" value="o" name="o" /><img src="/photos/map/icon_offshore.png" alt="icon_offshore" width="25" height="25" /> <span class="filterby">Offshore Services<span class="counts" id="o-count"></span></span><br />

<input type="checkbox" class="multiple" value="p" name="p" /><img src="/photos/map/icon_professional.png" alt="icon_professional" width="25" height="25" /> <span class="filterby">Professional Services<span class="counts" id="p-count"></span></span><br />

<input type="checkbox" class="multiple" value="fi" name="fi" /><img src="/photos/map/icon_field.png" alt="icon_field" width="25" height="25" /> <span class="filterby">Field Services<span class="counts" id="fi-count"></span></span><br />

<input type="checkbox" class="multiple" value="r" name="r" /><img src="/photos/map/icon_research.png" alt="icon_research" width="25" height="25" /> <span class="filterby">Research/workforce dev<span class="counts" id="r-count"></span></span></p> 

Answer 3

Simplest but working solution is:

input[type="checkbox"] {
  height: auto;
  width: auto;
}

in your css.

Answer 4

The issue is the width and height properties. Why exactly that matters is anyones guess, and I can't find any information on this issue. It seems that the width and height attributes work for the default state of the box, but gets thrown out while rendering the transition between the initial and alternate state.

The best solution would likely be:

input[type="checkbox"] { 
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);

  display: inline-block;
  margin-right: 5px; 
  border: 1px solid #0070BB; 
} 

You can also use a conditional comment to target older versions of IE (if you support them) and then add explicit height and width to get the style you're looking for:

<!--[if lt IE 9]>
  <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->