How to solve text change issue in Google Chrome when using animation?

Question

css

Hello.
There is a site on Bootstrap 3, it has a slider with animation. But bad luck - when the animation is performed, the text changes in a completely different block.
I sketched a short example consisting of two blocks: https://jsfiddle.net/5zgohLcz/
The problem is observed only in Google Chrome, in Mozzila, IE (latest version), Edge does not have a problem. If you look closely, then when the animation is performed, the color of the text in the dark block changes. What could be causing this and how to fix it?

Answer 1

As a temporary solution - add opacity: 0.99; to .navbar.
The problem seems to be the overlay of the block with opacity on the text, which leads to a change in the way the text is rendered.
https://jsfiddle.net/5zgohLcz/1/