Наложение без использования относительного родителя и заполнения дочернего

Question

Рассмотрим следующий пример, который отображает полупрозрачный красный слой на некоторый текст.

<div style="position: relative">
  <p>
    Foo
  </p>
  <p>
    Bar
  </p>
  <div style="position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: rgba(255,0,0,0.5)">
  </div>
</div>

В iOS Safari есть некоторые проблемы, из-за которых использование относительных div-ов в областях прокрутки шатко.

Итак, есть ли способ достичь тот же эффект наложения без использования относительных div? Только CSS, нет JavaScript!

РЕДАКТИРОВАТЬ:

Фактический эффект, которого я хочу добиться, это изменить наложение на другой цвет при наведении курсора мыши.

РЕДАКТИРОВАТЬ:

Похоже, что "flakiness" все еще присутствует в текущих iOS версиях. Вот некоторые более старые ссылки на подобные проблемы:

• Элементы исчезают при прокрутке в Safari - -webkit-transform fix работает только в первый раз
• https://github.com/scottjehl/Device-Bugs/issues/8
• webkit-overflow-scrolling заставляет элемент исчезать
• iPad Safari прокрутка вызывает HTML элементы исчезают и появляются с задержкой
• Элементы iPad Safari исчезают и появляются с задержкой

Answer 1

Вы можете рассмотреть фон на главном элементе и сделать дочерний элемент позади.

.box {
  background: rgba(255, 0, 0, 0.5);
}

.box>* {
  position: relative;
  z-index: -1;
}

.box:hover {
  background: rgba(255, 0, 0, 0.8);
}

<div class="box">
  <p>
    Foo
  </p>
  <p>
    Bar
  </p>
</div>

Просто убедитесь, что в основном элементе не используется свойство, которое создаст контекст стека. По теме: Почему элемент со значением z-index не может покрыть своего потомка?