Why Do Checkboxes Move When Checked in Safari

Why do checkboxes move when checked in Safari?

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]-->

need to explain why checkboxes look funky in Safari

wow i didn't even really notice the box was slightly lower than the text until you mentioned it. you can work around that in CSS though:

label {
    vertical-align: bottom;
}

aligns the text to the checkboxes for me (Safari 3.2.1)

Why does the checkbox stay checked when reloading the page?

Yes, I believe it is caching. I see this behaviour on Firefox for example (not Safari, for what that's worth :) ).

you can reload the page and bypass the cache (on Firefox) using CTRL-SHIFT-R and you'll see the check value doesn't carry (a normal CTRL-R will grab the info from the cache however)

edit: I was able to disable this server side on Firefox, setting a cache control header:

Cache-Control: no-store

this seems to disable the "remember form values" feature of Firefox

Many checkbox elements slows down Safari

The issue seems to lie with displaying the Safari checkbox. If the checkboxes exist in the dom but are hidden, by using display: none, the performance degradation is gone.

While I don't understand exactly why this is occuring, I can essentially resolve the issue by using custom checkbox element and applying the display: none property on the original.

Snippet - Fiddle Here

function make() { var num = 1600;  for( var i = 0; i < num; i++) {   var p = document.createElement("div");    var input = document.createElement("input");    var l = document.createElement("label");    var c = "c-" + Math.floor(Math.random() * 1600);    input.type = "checkbox";    l.htmlFor = c;    input.id = c;    p.appendChild(input);    p.appendChild(l);    document.getElementById("container").appendChild(p);  }}
function make2() { var num = 1600;  for( var i = 0; i < num; i++) {   var p = document.createElement("div");    var sp = document.createElement("span");    sp.innerHTML = Math.floor(Math.random() * 1600);    p.appendChild(sp);    document.getElementById("container").appendChild(p);  }}
make();

input[type=checkbox] {  display: none;}
label {  cursor: pointer;  border: 1px solid #ccc;  border-radius: 50%;  display: block;  height: 12px;  width: 12px;  margin-bottom: 4px;  position: relative;}
label:after {  background: red;  border-radius: 50%;  content: "";  position: absolute;  height: 8px;  width: 8px;  top: 2px;  left: 2px;  display: none;}
input[type=checkbox]:checked + label {  border-color: red;}
input[type=checkbox]:checked + label:after {  display: block;}

<input type="text"><div id="container">
</div>

jQuery Checkboxes in Safari

If you are working with a traditional input[type=checkbox] then I think you are looking for the click event, something like this:

jQuery('.top_class').click(function(){
    jQuery(this).closest('.row').toggleClass("add_over", jQuery(this).is(':checked') );
});

To be clear, this will work if this is your checkbox HTML (more or less):

<input type="checkbox" class="top_class" name="whatever" />

UPDATE: Safari may or may not accept focus on a checkbox depending on settings. Since there is no way to test this, I would handle it this way:

var $rows = jQuery('.row'); // Cache all rows
jQuery('.top_class').click(function(){
    var $row = jQuery(this).closest('.row');
    $rows.filter(".add_over").not($row).removeClass("add_over"); // Remove class from other rows
    $row.addClass('add_over');
});

That should do what you want. You can see a DEMO of it working in Safari here: http://jsbin.com/ohuxe/

Safari ignoring input checkbox positioning and width/height as well as slightly moving once checked

@Luke i don't think that there is need to put Input inside anchor tag. Please update your code first. here is the updated code please check. Ypu can use label instead of anchor tag . Rest you can update visual as per your requirement using css.

<div id="sidebarMort" class="right-content">    <a href="javascript:void(0)" class="closebtn" onclick="closeSIdeBar()">×</a>    <a style="margin-top: 50px"><h2>Mortgage Calculator</h2></a>    <a><input name="income" type="text" id="income" placeholder="Annual Income"></a><br>    <p>Are you First Time Buyer?</p><br>    <label for="ftb">Yes<input type="checkbox" id="ftb" value="ftb"></label>    <label for="stb">No<input type="checkbox" id="stb" value="stb"></label>    <input type="submit" class="btnOnBar" value="Calculate"></div>

---

Related Topics