Background-size transition not work in Chrome

I'm trying to transition background-size and background-color.

• Chrome: Transition of background-size not working
• Firefox: Both are working fine

I have also created a fiddle.

.highlight {
  display: block;
  position: relative;
  /*min-height: 800px;*/
  min-height: 200px;
  background-position: center center;
  background-repeat: no-repeat;
  /*padding-top: 200px;*/
  padding-top: 80px;
  /*background-size: cover;*/
}
.highlight:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .25);
  content: "";
}
.highlight {
  position: relative;
  height: 200px;
  cursor: pointer;
  background-size: auto 110%;
  background-position: center center;
  -moz-transition: background-size 3s ease;
  -webkit-transition: background-size 3s ease;
  transition: background-size 3s ease;
}
.highlight:hover {
  background-size: auto 130%;
  background-color: rgba(0, 0, 0, 0.4);
  -moz-transition: background-size 3s ease;
  -webkit-transition: background-size 3s ease;
  transition: background-size 3s ease;
}
.highlight:before {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  -moz-transition: background-color 3s ease;
  -webkit-transition: background-color 3s ease;
  transition: background-color 3s ease;
}
.highlight:hover:before {
  background-color: rgba(0, 0, 0, 0.8);
  -moz-transition: background-color 3s ease;
  -webkit-transition: background-color 3s ease;
  transition: background-color 3s ease;
}

<div class="highlight" style="background-image:url(http://cdn2.stillgalaxy.com/ori/2015/06/06/female-doctors-stock-photos-2331433563559.jpg);">
</div>

Anybody helps me with this? Or can figure that is broking these transition?

Thanks