Different browser, different output

[Sandy]

This is a really odd one...I have a bit of code looping through the home page's children and outputting navbar links:

<?php
                foreach ($homePage->children() as $child) {
                  $childTemplate = $child->template;
                  // check if nav item matches this page and mark as current
                  if (($child->id == $page->id) && ($page->template != 'plan-a-visit')) {
                    $ariaCurrent = " aria-current='page'";
                  } else {
                    $ariaCurrent = "";
                  }

                  if ($childTemplate != 'plan-a-visit') {
                    if (!empty($child->page_tags)) {
                      $tags = explode(' ', $child->page_tags);
                      if (in_array("navbar", $tags)) {
                        echo "
                          <a href='{$child->url}' class='navlink text-sm font-normal text-grey border-b-2 border-transparent hover:text-grey-search hover:border-b-2 hover:border-transparent py-2'{$ariaCurrent}>{$child->title}</a>
                        ";    
                      }
                    }
                  } else {
                    echo "
                      <a href='{$child->url}' class='btn'{$ariaCurrent}>{$child->title}</a>
                    ";
                  }
                }
                ?>

This works fine in Firefox (Mac, v98.0.2) and produces the following source code:

<nav class="md:flex items-center md:justify-items-end space-x-4 md:space-x-5 lg:space-x-10">
                
  <a href="/calendar/" class="navlink text-sm font-normal text-grey border-b-2 border-transparent hover:text-grey-search hover:border-b-2 hover:border-transparent py-2" aria-current="page">Calendar</a>

  <a href="/resources/" class="navlink text-sm font-normal text-grey border-b-2 border-transparent hover:text-grey-search hover:border-b-2 hover:border-transparent py-2">Resources</a>

  <a href="/donate/" class="navlink text-sm font-normal text-grey border-b-2 border-transparent hover:text-grey-search hover:border-b-2 hover:border-transparent py-2">Donate</a>

  <a href="/contact/" class="navlink text-sm font-normal text-grey border-b-2 border-transparent hover:text-grey-search hover:border-b-2 hover:border-transparent py-2">Contact</a>

    <a href="/plan-a-visit/" class="btn">Plan a Visit</a>
</nav>

But in Chrome and Safari, it doesn't output any of the first links (marked in bold above), only the one generated in the else statement at the end. I can't figure out how PW can apparently be sending different source code to different browsers. Any ideas?

I'm running ProcessWire 3.0.184.

Thanks

[bernhard]

Browser cache? Logged in vs. not logged in? Copy the markup from "else" (the one that shows up) to "if" and see if that makes a difference. Maybe you have an error with some closing tag or quotes that the browsers handle differently...

[Sandy]

1 hour ago, bernhard said:

Browser cache? Logged in vs. not logged in? Copy the markup from "else" (the one that shows up) to "if" and see if that makes a difference. Maybe you have an error with some closing tag or quotes that the browsers handle differently...

Thanks Bernhard. I've tried:

1. Hard browser reloads
2. Cleared caches
3. Swapping the if and else code
4. Checked all closing tags and quotes
5. Disabled Javascript files
6. Disabled font loading

Exactly the same result: Links display as they should be in Firefox, but don't appear in the source code of Chrome or Safari.

[Sandy]

6 minutes ago, Sandy said:

Thanks Bernhard. I've tried:

1. Hard browser reloads
2. Cleared caches
3. Swapping the if and else code
4. Checked all closing tags and quotes
5. Disabled Javascript files
6. Disabled font loading

Exactly the same result: Links display as they should be in Firefox, but don't appear in the source code of Chrome or Safari.

Also tried...

1. Restarting my local server
2. Restarting my machine
3. Pushing the site to a remote PW install

No joy.

[Sandy]

Given up and decided to hard code them. I'll try and fix it later.

[BillH]

Just a thought, but might you have been logged in as different users with different roles/permissions in each browser, and the template have particular access set up?

[aagd]

It seems very unlikely to me that php can serve different code to different browsers. Did you check the output also in the page source (not inspector)? Does Firefox mark anything in red in page source (which should hint to html errors)?

[DaveP]

I think some of your class declarations are invalid. (On mobile so copy/paste awkward.)

The 'hover:xxxx' is CSS but not valid as a class name. Firefox is obvs more easy-going than others.

Hope this makes sense.

[bernhard]

That's TailwindCSS, so that should not be the issue ?   https://tailwindcss.com/docs/hover-focus-and-other-states

[DaveP]

Oop, my bad. As you were.

[Sandy]

21 hours ago, BillH said:

Just a thought, but might you have been logged in as different users with different roles/permissions in each browser, and the template have particular access set up?

No logging in going on.

[Sandy]

9 hours ago, aagd said:

It seems very unlikely to me that php can serve different code to different browsers. Did you check the output also in the page source (not inspector)? Does Firefox mark anything in red in page source (which should hint to html errors)?

Yes, the code in the first post was copied directly from the source in the two browsers. The full set of nav links are completely missing. I haven't been able to track down any JS or browser plugins which could have removed the HTML elements. I disabled all JS, ad-blockers etc. to see if it made any difference.

Really stumped by this. I can't believe it could be PHP altering the output. Think it's much more likely a browser and/or user error, but I just can't track the damn thing down.

Anyway, I've hard-coded them for now, and luckily the nav pages are unlikely to change. I'll just have to circle back to it once the project's finished for my own sanity!

[aagd]

You probably tried this already, just to be sure: Deleting the site/assets/cache folder. Checking that caching is off in that template's settings.

[Sandy]

On 4/4/2022 at 8:55 AM, aagd said:

You probably tried this already, just to be sure: Deleting the site/assets/cache folder. Checking that caching is off in that template's settings.

Yes, I tried deleting the cache. The code is just in an include file (not a PW template)...I should have mentioned that earlier.

[BillH]

This increasingly sounds to me like a cache issue – perhaps some cache on the server, or maybe browser caches aren't clearing as expected.

To help find out if caching is the issue, I'd suggest renaming the include file to see if that makes a difference.

If it doesn't, try (temporarily) putting the code from the include file into the main file.

[wbmnfktr]

Are there markup-regions involved in your setup that maybe interfere here?

Which version of ProcessWire are you using and which profile is installed?

 

[Sandy]

On 4/5/2022 at 11:43 AM, BillH said:

This increasingly sounds to me like a cache issue – perhaps some cache on the server, or maybe browser caches aren't clearing as expected.

To help find out if caching is the issue, I'd suggest renaming the include file to see if that makes a difference.

If it doesn't, try (temporarily) putting the code from the include file into the main file.

I think you're right about it being a cache issue. I'll circle back to this once the site is in production and I have a bit of time. I'll post back here in case it helps someone else.

[cst989]

The only time I've had different output in different browsers that wasn't a CSS etc issue, was with https or cross-browser cookie policies, where one browser was more strict with what it blocked than the other. I know I'm just brainstorming and it doesn't match the code you've provided, but food for thought maybe for you or another who lands here from google...