Webkit browers don't inherit transitioned background color while it's changing on hover

Question

When I hover over the parent; or child with inheritied background color from parent, the color changes on both with CSS transition, but not in Webkit browsers in Windows. The child element's background doesn't update. See the navigation area on the left side on my site with the toggler above

Here's the simplified HTML:

<div class="navigation_area">
  <label class="navigation_toggler_desktop">
  </label>
</div>  

And the CSS:

.navigation_area {
  background-color: rgba(159, 0, 0, 0.7);
  transition: background 0.12s linear 0s;
}

  .navigation_area:hover {
    background-color: rgba(159, 0, 0, 0.7);
  }

  .navigation_toggler_desktop {
    position: absolute;
    background-color: inherit;
  }

It works properly on Chrome in Ubuntu Linux, the problem is on Windows. Thought it's the same code everywhere... Same problem in Opera in Windows. All other browsers are fine...

Thx for any help.

Answer 1

I have managed to solve my own problem by moving the transition from the .navigation_area to the .navigation_area:hover. Now the child element seems to properly inherit the background on all browsers. Still weird why it only caused problems in Chrome and Opera in Windows alone... Anyways