title: Why do checkboxes move when checked in Safari?
body: <p>I have a series of values with checkboxes pre-checked on this <a href="http://www.sewind.org/map/find-companies" rel="nofollow noreferrer">page</a>. 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.</p>
  
  <p>I did some research, but I didn't find anything about how to keep the boxes from moving.</p>
  
  <p>Here is the code for the checkbox:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input[type="checkbox"] {
    width: 25px;
    height: 25px;
    -webkit-transform: scale(1.3, 1.3);
    display: inline-block;
    margin-right: 5px;
    border: 1px solid #0070BB;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;&lt;input type="checkbox" class="multiple" value="n" name="n" /&gt;&lt;img src="/photos/map/icon_nacelle.png" alt="icon_nacelle" width="25" height="25" /&gt; &lt;span class="filterby"&gt;Nacelle&lt;span class="counts" id="n-count"&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;
  
    &lt;input type="checkbox" class="multiple" value="b" name="b" /&gt;&lt;img src="/photos/map/icon_blade.png" alt="icon_blade" width="25" height="25" /&gt; &lt;span class="filterby"&gt;Blade/rotor&lt;span class="counts" id="b-count"&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;
  
    &lt;input type="checkbox" class="multiple" value="t" name="t" /&gt;&lt;img src="/photos/map/icon_tower.png" alt="icon_tower" width="25" height="25" /&gt; &lt;span class="filterby"&gt;Tower&lt;span class="counts" id="t-count"&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;
  
    &lt;input type="checkbox" class="multiple" value="f" name="f" /&gt;&lt;img src="/photos/map/icon_foundation.png" alt="icon_foundation" width="25" height="25" /&gt; &lt;span class="filterby"&gt;Foundation&lt;span class="counts" id="f-count"&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;
  
    &lt;input type="checkbox" class="multiple" value="tr" name="tr" /&gt;&lt;img src="/photos/map/icon_transmission.png" alt="icon_transmission" width="25" height="25" /&gt; &lt;span class="filterby"&gt;Transmission/Electrical&lt;span class="counts" id="tr-count"&gt;&lt;/span&gt;&lt;/span&gt;&lt;br
    /&gt;
  
    &lt;input type="checkbox" class="multiple" value="o" name="o" /&gt;&lt;img src="/photos/map/icon_offshore.png" alt="icon_offshore" width="25" height="25" /&gt; &lt;span class="filterby"&gt;Offshore Services&lt;span class="counts" id="o-count"&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;
  
    &lt;input type="checkbox" class="multiple" value="p" name="p" /&gt;&lt;img src="/photos/map/icon_professional.png" alt="icon_professional" width="25" height="25" /&gt; &lt;span class="filterby"&gt;Professional Services&lt;span class="counts" id="p-count"&gt;&lt;/span&gt;&lt;/span&gt;&lt;br
    /&gt;
  
    &lt;input type="checkbox" class="multiple" value="fi" name="fi" /&gt;&lt;img src="/photos/map/icon_field.png" alt="icon_field" width="25" height="25" /&gt; &lt;span class="filterby"&gt;Field Services&lt;span class="counts" id="fi-count"&gt;&lt;/span&gt;&lt;/span&gt;&lt;br /&gt;
  
    &lt;input type="checkbox" class="multiple" value="r" name="r" /&gt;&lt;img src="/photos/map/icon_research.png" alt="icon_research" width="25" height="25" /&gt; &lt;span class="filterby"&gt;Research/workforce dev&lt;span class="counts" id="r-count"&gt;&lt;/span&gt;&lt;/span&gt;
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How do I style the checkboxes so they are stationary and only change state when clicked?</p>