Random image generator works in Safari but not Chrome/Firefox

I'm working on a site design and am trying out a homepage design using CSS grid (using Themeco's Pro WP theme) with two different cells assigned unique IDs. I found a way to randomize the background images of each cell by making a PHP function (for what I want to accomplish, background-image seems more appropriate than img), and my code works perfectly in Safari, but the randomization does not work at all in Chrome or Firefox. Chrome and Firefox do act consistently with each other, but oddly, they only show the third item in the $designbg array and only the second item in the $photobg array. Figuring there must be some reason it's breaking in such a specific way, but I can't figure it out.

You can see it in action here: https://beta.cheshiredave.com

I also tried deleting the three cells other than the ones containing the background images, and the randomization still doesn't work on Chrome/FF EXCEPT that now the images being pulled from the arrays is different: now I get the second item from the $designbg array and the first from the $photobg array. See the difference here:

https://beta.cheshiredave.com/test

Weird side note: also oddly, the words "photography" and "art direction" don't show up on Chrome on Windows, but they do show up as expected on Chrome on Mac. The words appear and behave normally on other Mac/Windows browsers. Making me wonder if something is wonky with assigning IDs to grid cells.

Here's the code:

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' );

In case you're wondering, I have tried the wp_head hook instead already, and I have also tried array_rand; no difference in either case.

Thanks for any insights!