PHP sort not working in Chrome and Safari - php

Question

I am not sure if it is the sort that isn't working or the way that I am outputting the information. But it would seem that the order that these "li" elements are being made is wrong sometimes.
The images in the folder are named something like
A-Mike-groomsman-topRight-light.jpg
B-James-groomsman-topRight-light.jpg
C-Jared-groomsman-topRight-light.jpg
Code is below. The "li" are in the right order in Firefox, but Chrome and Safari sometimes they put the last one first. Then sometimes they don't. Though I wonder if it could be the bxslider moving things around after the page load? Anyone experience this before?
<?PHP
$titleName = 'who\'s who'; //Wording for title of this section. Change this if you want to change the title text of this section
include 'modules/title.php';
$boydirectory = $_SERVER['DOCUMENT_ROOT']."/resources/images/who/boys";
$girldirectory = $_SERVER['DOCUMENT_ROOT']."/resources/images/who/girls";
$boy_results_array = array();
$girl_results_array = array();
if (is_dir($boydirectory))
{
if ($handle = opendir($boydirectory))
{
foreach(glob($boydirectory.'/*.*') as $file)
{
$boy_results_array[] = basename($file);
}
closedir($handle);
}
}
if (is_dir($girldirectory))
{
if ($handle = opendir($girldirectory))
{
foreach(glob($girldirectory.'/*.*') as $file)
{
$girl_results_array[] = basename($file);
}
closedir($handle);
}
}
sort($boy_results_array);
sort($girl_results_array);
?>
<div class="whoSlider boy">
<h3>Boys</h3>
<ul class="whoBoysbxslider">
<?php
if(count($boy_results_array) > 0){
for ($i = 0; $i < count($boy_results_array); $i++) {
$result = explode('-', $boy_results_array[$i]);
$name = str_replace("_", " ", $result[1]);
$job = str_replace("_", " ", $result[2]);
$alignment = $result[3];
$color = str_replace(".jpg", "", $result[4]);
echo "<li>";
echo "<img src=\"../resources/images/who/boys/$boy_results_array[$i]\" />";
echo "<div class=\"captionContainer $alignment $color\">";
echo "<span>$name</span>";
echo "<span>$job</span>";
echo "</div></li>";
}
}
?>
</ul>
</div>
<div class="whoSlider girl">
<h3>Girls</h3>
<ul class="whoGirlsbxslider">
<?php
if(count($girl_results_array) > 0){
for ($j = 0; $j < count($girl_results_array); $j++) {
$result = explode('-', $girl_results_array[$j]);
$name = str_replace("_", " ", $result[1]);
$job = str_replace("_", " ", $result[2]);
$alignment = $result[3];
$color = str_replace(".jpg", "", $result[4]);
echo "<li>";
echo "<img src=\"../resources/images/who/girls/$girl_results_array[$j]\" />";
echo "<div class=\"captionContainer $alignment $color\">";
echo "<span>$name</span>";
echo "<span>$job</span>";
echo "</div></li>";
}
}
?>
</ul>
</div>

Answer 1

Apparently the issue was not with php but with the BX slider. The issue is it was going to the clone slide instead of the first slide. Only in chrome and Safari. The below link talks about the issue.
https://github.com/stevenwanderski/bxslider-4/issues/154
The solution in there that worked for me was adding this to the jquery.bxslider.css file
.bx-viewport li { min-height: 1px; min-width: 1px; }

Answer 2

try
flush()
after echo() to make sure the content you want to print is sent to the client at that point.

Answer 3

First of all, PHP is a server side language and the behaviour is not effected by the browser.
So I would say that your issue is caused by bxslider which is a jQuery plugin so the behaviour it could be affected by the browser.
To check that you can press ctrl+u in firefox and chrome and see that the html is the same.