Missing background in thread view on mobile devices

eternal_noob

eternal_noob

The background in the site header is missing in the thread view on my cellphone. (Top right, black area)

Screenshot_20231205-193359_Chrome.jpg

Viewing the forum index works as expected

Screenshot_20231205-193411_Chrome.jpg

Latest Chrome on Android 13.
 
Interesting, the top bar should be the same everywhere. It looks like something in that "hamburger" menu button isn't working correctly in some cases.
 
Firefox on my MacBook Pro has the same problem. It's not related to Chrome nor mobile devices but rather the available width of the browser window.

Screenshot 2023-12-06 at 16.40.10.png
 
That's only a subsequent fault of duplicating code.

The real issue here is the use of different templates for the header / same task.
 
The shots were to help put things in context.

eternal_noob said:
ugliness
Click to expand...

For FreeBSD Style, which of the perceptibly non-ugly elements would you like to remain unchanged?

forums.freebsd.org

FreeBSD Style (the default style at The FreeBSD Forums)

Looking ahead, will FreeBSD Style (for XenForo) change? To match the future style for the FreeBSD Project site. relates. The header, as currently previewed: For narrower windows, before and after clicking the hamburger menu button:
forums.freebsd.org forums.freebsd.org
 
Looks like some CSS weirdness. I've searched through all templates and freebsd_hdr_fill.png is mentioned only once. Perhaps it does have the strange URL for the "wide" desktop version too but apparently it's not a problem there.
 
It's not in the CSS it's in the <style> section on the page
the error is in the absolute path it must change from:

background-image: url("styles/freebsd/xenforo/freebsd_hdr_fill.png")
Click to expand...
To:
background-image: url(/styles/freebsd/xenforo/freebsd_hdr_fill.png)
Click to expand...
 
Yes, I suspected relative vs. absolute too. But as I said, there's only a single template that references freebsd_hdr_fill.png and it has the correct absolute path. So this thing is coming from somewhere else and I have no idea where.

Are there any classes or other identifiers around it? That might help searching for it.
 
1702050368546.png


It should look like this:
document.querySelector("head > style:nth-child(31)")
/html/head/style[3]

Code: 
<style>.p-nav-smallLogo {display: none !important;}div#freebsd_menu ul.first,div#freebsd_menu ul:first-of-type {border-left: 0 !important;padding-left: 0;}div#freebsd_menu span.closingButton {display: none;}button#btn-hamburger {display: none;}div.frontdonateroundbox.donate-left {display: none;}@media screen and (max-width: 919px) {div.frontdonateroundbox {display: none;}html.menu-open {overflow-y: hidden !important}body {background-image: none;}div#freebsd_headercontainer {width: auto;font-size: 0px;letter-spacing: 0px;word-spacing: 0px;text-align: center;padding-bottom: 0;margin-bottom: 0px;background-color: black;border-bottom: 0px;}div#freebsd_menu {width: auto;margin: 0 !important;float: none;display: inline-block;font-size: 12px;box-sizing: border-box;padding-top: 5px;text-align: left;}div#freebsd_headercontainer {height: 77px;background-image: url(/styles/freebsd/xenforo/freebsd_hdr_fill.png);}div#freebsd_headerlogoleft {margin: 0 auto;text-align: left;overflow: hidden;}div#freebsd_headerlogoleft img {width: auto;height: 75px;}div#freebsd_menu {display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;margin: 0;padding: 61px 0 0px;text-align: center;z-index: 5000;background: #e5e5e5;overflow-y: auto;}div#freebsd_menu ul {border: none;display: inline-block;width: 100%;height: auto;overflow: auto;padding: 0 0 20px 0;cursor: pointer;}div#freebsd_menu ul ul {display: none !important;}html.submenu-open div#freebsd_menu ul ul {display: block !important;}div#freebsd_menu ul {display: inline-block;overflow: auto;}div#freebsd_menu ul ul {position: static;}div#freebsd_menu ul ul {margin-top: 20px;border-top: 1px solid #B4B4B4;padding: 20px 0 0;}div#freebsd_menu ul ul li {border-top: none;padding: 0 0 20px 0;}div#freebsd_menu span.closingButton {display: block;position: absolute;top: 20px;right: 20px;cursor: pointer;}button#btn-hamburger {box-sizing: border-box;display: block;position: absolute;top: 0;right: 0;height: 75px;width: 75px;padding: 17px 22px 18px 23px;cursor: pointer;margin: 0;border: 0;background: transparent;outline: 0 !important;}button#btn-hamburger span.icon-bar {display: block;box-sizing: border-box;border-radius: 2px;background-color: #eee;width: 30px;height: 4px;margin: 6px 0;}button#btn-hamburger:hover span.icon-bar {background-color: #fff;}div.frontdonateroundbox.donate-left {display: block;margin: -10px 4px 8px 20px;float: left;font-size: 11px;}}@media screen and (max-width: 410px) {div.frontdonateroundbox.donate-left {line-height: 13px !important;vertical-align: middle;margin-top: 6px;}}@media screen and (max-width: 559px) {div#freebsd_headerlogoleft img {height: 59px;}div#freebsd_headercontainer {height: 61px;background-image: url(/styles/freebsd/xenforo/freebsd_hdr_fill.png);background-position: 0 -16px;}button#btn-hamburger {height: 59px;width: 59px;padding: 11px 15px 10px 14px;}}@media screen and (max-width: 429px) {div#freebsd_headerlogoleft {width: 212px;overflow: hidden;}div#freebsd_headerlogoleft img {max-width: 457px;}}@media screen and (max-width: 359px) {div.frontdonateroundbox.donate-left {margin: -10px 0 0 10px;}}@media screen and (max-width: 329px) {div.frontdonateroundbox.donate-left {float: none;margin: -10px 0 10px 10px;}}@media screen and (min-width: 651px) and (max-width: 919px) {div.frontdonateroundbox.donate-left {margin-bottom: 4px;}}</style>
 
looks like the "offending" css is loaded by js and inserted in <head> after the page load
if you curl the page or disable js it's not there
 
SirDice said:
The real question here is why is this happening on mobile but not on the desktop version.
Click to expand...
I have this artefact on the desktop (win 10, Firefox 115.5esr, display res. 1920x1080) as well; there is a change between the two states when the width of the browser window goes below a certain value, see attached parts of screenshots (full width, height cropped):

bgrnd-Y-R0.5.jpg


bgrnd-N-R0.5.jpg
 
Erichans said:
I have this artefact on the desktop (win 10, Firefox 115.5esr, display res. 1920x1080) as well; there is a change between the two states when the width of the browser window goes below a certain value
Click to expand...
Yes. I know, can reproduce the error just by resizing the browser window. That's useful but doesn't narrow down the exact location of the issue.

I've gone through all the styles, can't find a reference to it anywhere. I'll have a look through the javascript file. Maybe that has some identifiable markers.
 
SirDice said:
Yes. I know, can reproduce the error just by resizing the browser window. That's useful but doesn't narrow down the exact location of the issue.

I've gone through all the styles, can't find a reference to it anywhere. I'll have a look through the javascript file. Maybe that has some identifiable markers.
Click to expand...
its embedded in the js file above
 
Yes, found it, in the javascript I mean.

Code: 
div#freebsd_headercontainer {height: 77px;background-image: url("styles/freebsd/xenforo/freebsd_hdr_fill.png");}
That's the part I was looking for. That freebsd_headercontainer is defined somewhere. Those styles and templates are riddled with macros, so it's as clear as mud trying to figure out where things come from.
 
eternal_noob said:
That's only a subsequent fault of duplicating code.

The real issue here is the use of different templates for the header / same task.
Click to expand...
Maybe try to fix the real error instead.

Is there a reason that the thread view needs a different header than the forum index?
 
Because it works on one page and doesn't work on another. There must be something different code-wise.

Only a fool runs the same code twice and expects different results.
Click to expand...

This saying can be reversed in this case, i believe.
 
You must log in or register to reply here.
Back
Top