Jump to content

Different browser, different output


Sandy
 Share

Recommended Posts

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

Link to comment
Share on other sites

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...

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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)?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...
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.

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

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...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...