Choppy transform with CSS filter on Chrome

I'm doing a hover effect that increases the images brightness and scales the image on hover state. For some reason the transform seems to choppy with the CSS filter. Any idea why this makes the transform choppy? Seems to be working smoothy on Safari and Firefox.

Basically I'm doing this:

.parent
  width 300px
  height 300px
  overflow hidden
  img
    transition: all 1s ease-out
    transform: translate(0px, 0);
    filter: brightness(80%)
    &:hover
      transform: scale(1.1)

See full demo here: http://codepen.io/tzzo/pen/MmKeVm

Thanks.

Solution

I came up with a lightweight and well supported implementation.

I ditched CSS filters and decided to use opacity instead. If the background of the image doesn't work well with the you have to set it separately.

img
  background-color: black
  opacity: 0.8
  transition: all 3s ease-in-out
  &:hover
     opacity: 1
     transform: scale(1.1)

Added working solution to my pen: http://codepen.io/tzzo/pen/MmKeVm