Safari 8 label + checkbox hover flickering, how to prevent?

Question

First of all: in Safari, the 8 checkboxes and radio buttons that were checked will flash, as if it were pressed. Code example:

<div> <label><input type="checkbox" checked> Hover me in Safari 8</label> </div> <style> div { background-color: #eee; padding: 1em; } label { line-height: 2em; display: block; } label:hover { background-color: #fff; } </style> 

I also created a JSFiddle here , but keep in mind that this only happens in the first hover event and not in subsequent ones. You need to re-run the code to call it again.

Does anyone know where this behavior comes from and how to prevent it? Neither Chrome nor Firefox show this flicker.

Update

I reported this to Apple on bugreporter.apple.com and they closed my problem (radar 21101864) with the status of Duplicate 17781269 (Open).

Answer 1

Using -webkit-transform: translateZ(0); to the input element that worked for me (dirty though, I know).