Text Is Briefly Hidden Behind Video

I am using fullpage.js to create full screen pages. If you scroll to the next section(s) and scroll back to the first section (with video background and the overlay text), the text

Solution 1:

Use translate3d(0,0,0) for the text:

.text {
  font-size: 123px;
  z-index: 2;
  position: absolute;
  margin: 0 auto;
  background-color: red;
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}