Friday, August 23, 2013

IE 6/7/8 workaround for custom radio buttons and checkboxes causes page to scroll up

When our client was testing their web site we got feedback regarding a weird scrolling issue that occured when they clicked custom radio buttons and checkboxes. This didn't occur in all browsers, only in Internet Explorer 6, 7 and 8.

The original workaround

The original problem was, and still is for these older IE versions, that when you add custom design to radio buttons and checkboxes you can't use display: none or visibility:hidden to hide the underlying input element. This is because when clicking the label element, IE wont trigger the checked attribute to be set on the input element. So the usual workaround is to still have the input element visible and displayed and instead using something like margin: -10000px or top: -5000px with position: absolute.

The following issue

In your IE 6/7/8 css you have the above mentioned workaround. Everything works fine, you can use the custom checkboxes and radio buttons. 

But wait, there's more.

Since the solution was to use margin: -10000px or top: -5000px - when you click the label at the custom design buttons/boxes IE will focus the browser to the height of the underlying input element that was associated with the label that the user just clicked. 

The result is, if you click the custom button/box when you also have scrolled down a bit, you the browser scrolls back to the top. Because as I mentioned, when the label is clicked, the input field becomes focused.

The final solution

The final solution is nothing special. Just instead of using margin: 10000px or top: -5000px. Use left: -5000px. So the height is as expected, the same height as the original position. The left position just causes it to not be seen by the user. No more weird scrolling when clicking the custom radio button or checkbox, woho!