Генератор случайных изображений работает в Safari, но не в Chrome / Firefox.

Question

Я работаю над дизайном сайта и пробую дизайн домашней страницы с использованием сетки CSS (с использованием темы Pro WP от Themeco) с двумя разными ячейками, которым присвоены уникальные идентификаторы. Я нашел способ рандомизировать фоновые изображения каждой ячейки, создав функцию PHP (для того, что я хочу выполнить sh, background-image кажется более подходящим, чем img), и мой код отлично работает в Safari, но рандомизация вообще не работает в Chrome или Firefox. Chrome и Firefox действуют согласованно друг с другом, но, как ни странно, они показывают только третий элемент в массиве $ designbg и только второй элемент в массиве $ photobg. Полагаю, что должна быть какая-то причина, по которой он ломается таким c способом, но я не могу понять этого.

Вы можете увидеть это в действии здесь: https://beta.cheshiredave.com

Я также попытался удалить три ячейки, кроме тех, которые содержат фоновые изображения, и рандомизация по-прежнему не работает в Chrome / FF, ЗА ИСКЛЮЧЕНИЕМ того, что теперь изображения, извлекаемые из массивов, разные: теперь я получаю второй элемент из массива $ designbg и первый из массива $ photobg. Посмотрите на разницу здесь:

https://beta.cheshiredave.com/test

Странное примечание: также странно, что слова «фотография» и «художественное направление» не отображаются Chrome на Windows, но они появляются, как и ожидалось, Chrome на c. Слова появляются и работают нормально в других браузерах Mac / Windows. Заставляя меня задуматься, что-то не так с присвоением идентификаторов ячейкам сетки.

Вот код:

function randomizeBg(){

  $designbg = array('/wp-content/uploads/2020/06/farm.poster.plain_.jpg','/wp-content/uploads/2020/05/maglayout.jpg','/wp-content/uploads/2020/08/farm.blue_.jpg'); // array of filenames

  $dbg = rand(0, count($designbg)-1); // generate random number size of the array
  $selectedDesignBg = "$designbg[$dbg]"; // set variable equal to which random filename was chosen

  $photobg = array('/wp-content/uploads/2020/06/ginkgo.jpg','/wp-content/uploads/2020/05/amelie.jpg','/wp-content/uploads/2020/08/amelie.red_.jpg'); // array of filenames

  $pbg = rand(0, count($photobg)-1); // generate random number size of the array
  $selectedPhotoBg = "$photobg[$pbg]"; // set variable equal to which random filename was chosen

  ?>
  
  <style>
  #designside {
    background-image: url(<?php echo $selectedDesignBg; ?>) !important;
    z-index: -9999;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

  #photoside {
    background-image: url(<?php echo $selectedPhotoBg; ?>) !important;
    z-index: -9999;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

</style>
  
  <?php
  
};

add_action( 'x_before_the_content_begin', 'randomizeBg' );

Если вам интересно, я уже пробовал вместо этого хук wp_head, и Я также пробовал array_rand; без разницы в любом случае.

Спасибо за любые идеи!