guitarcenter.com / jQuery errors / Style issue

For support with specific websites

Moderator: trava90

Forum rules
Please always mention the name/domain of the website in question in your topic title.
Post Reply
User avatar
ioSelect
New to the forum
New to the forum
Posts: 1
Joined: 2020-07-16, 00:23

guitarcenter.com / jQuery errors / Style issue

Post by ioSelect » 2021-05-14, 04:01

guitarcenter.com

Having styling issues after update; there is a error loading what looks to be an older jQuery version:
Untitled.png
Same issue with any of the new 'color theme' settings (light,dark,disabled).

Please let us know ..and Thanks for the great browser!

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 30216
Joined: 2011-08-28, 17:27
Location: Tranås, SE
Contact:

Re: guitarcenter.com / jQuery errors / Style issue

Post by Moonchild » 2021-05-14, 11:20

Unable to reproduce, here.
Attachments
FireShot Pro Screen Capture #271 - 'Guitar Center_ Music Instruments, Accessories and Equipment' - www_guitarcenter_com.jpg
"Son, in life you do not fight battles because you expect to win, you fight them merely because they need to be fought." -- Snagglepuss
Image

vannilla
Board Warrior
Board Warrior
Posts: 1686
Joined: 2018-05-05, 13:29

Re: guitarcenter.com / jQuery errors / Style issue

Post by vannilla » 2021-05-14, 11:55

The top of the homepage looks good, but everything else including subpages is broken.
I didn't explore too much so I can't really tell if the messages in the console are meaningful or not.

User avatar
Night Wing
Knows the dark side
Knows the dark side
Posts: 4541
Joined: 2011-10-03, 10:19
Location: Piney Woods of Southeast Texas, USA

Re: guitarcenter.com / jQuery errors / Style issue

Post by Night Wing » 2021-05-14, 11:59

No problems here either with me using, at this time, 64 bit linux Pale Moon 29.2.0 running in 64 bit linux Mint 20.1 (Ulysssa) Xfce
Linux Mint 20.1 (Ulyssa) Xfce 64 Bit with 64 Bit linux Pale Moon

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 30216
Joined: 2011-08-28, 17:27
Location: Tranås, SE
Contact:

Re: guitarcenter.com / jQuery errors / Style issue

Post by Moonchild » 2021-05-14, 12:09

Looks like a case of:

Code: Select all

<link rel="preload" href="path/to/css" onload="this.rel='stylesheet'">
They are using "link rel=preload" which is an experimental feature that isn't supported by us (even Firefox only JUST has it since 85, according to MDN, but of course it's a long-since implemented Chrome feature where this originated), so that explains all the missing styling on the page.

Preloading css might in corner cases prevent a brief unstyled display of the page (depending on many, many factors) while it is loading, but effectively there will be no advantage to page load times or final rendering. it is wholly unnecessary to do this and webmasters of production systems should always opt for the more compatible choice, all things being equal (which in this case, they are).

The fix is simple though, just use rel="stylesheet" instead of "rel="preload", remove the onload handler from the <link> elements (which requires JS for it to work, as well, by the way, which isn't good or necessary to just load stylesheets!), and done. Sooo... someone get in touch with the webmaster and relay this information? it'd be in their own best interest to fix this.

See also: viewtopic.php?f=70&t=26061&p=207349&hil ... ad#p207349
"Son, in life you do not fight battles because you expect to win, you fight them merely because they need to be fought." -- Snagglepuss
Image

User avatar
jobbautista9
Lunatic
Lunatic
Posts: 345
Joined: 2020-11-03, 06:47
Location: Philippines
Contact:

Re: guitarcenter.com / jQuery errors / Style issue

Post by jobbautista9 » 2021-05-14, 13:43

Why would someone preload their CSS? Aren't they always loaded first anyway? And even if they want to preload it, why won't they just add it along with stylesheet? You can use multiple rel attributes AFAIK, you just need to separate them with a space.

What a lazy web dev.
Cyndaquil is the best starter, except in Pokemon Mystery Dungeon, which sucks. I still love PMD though!

Developer of Ambassador in Window Menu, BrowserTickTock, CacheSwitch, Chrome Navigator, Cite4Wiki, Clickity Touch 'n Push, ColorPili, EditDatContent, EditDatTitle, Esrever, Go Menu, User Agent Status, Website Navigation Bar, and Yet Another about:config Helper.

My PGP public key (My copy on rw.rs)

Avatar by @MaxiOrphy of Instagram.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 30216
Joined: 2011-08-28, 17:27
Location: Tranås, SE
Contact:

Re: guitarcenter.com / jQuery errors / Style issue

Post by Moonchild » 2021-05-14, 14:14

jobbautista9 wrote:
2021-05-14, 13:43
Why would someone preload their CSS? Aren't they always loaded first anyway?
I already explained why someone would want to preload CSS in my previous reply.
And no, many things are loaded as they become available. Fetching resources in a webpage is not synchronous or sequential.
jobbautista9 wrote:
2021-05-14, 13:43
You can use multiple rel attributes AFAIK
Where did you get that information? AFAIK you can't have more than one rel attribute.
jobbautista9 wrote:
2021-05-14, 13:43
What a lazy web dev.
Just trying to be trendy and being misinformed.

The proper (also according to MDN) way to preload, if you insist on it despite its experimental nature, would be to do it this way:
First, issue the preload, so the browser can preload the stylesheet if the feature is supported...

Code: Select all

<link rel="preload" href="style.css" as="style">
Then list a regular stylesheet link to link the css.

Code: Select all

<link rel="stylesheet" href="style.css">
This keeps it backwards compatible, avoids using JS and unspecified behaviour when changing the relationship of an already-parsed link attribute, and avoids potential restyling (both from preloading and relationship changes of the link). The parser can then use all information in one go; it knows it should preload and cache the .css file, and it knows it is to be linked as a stylesheet. All without re-parsing or dealing with DOM changes or firing up the JavaScript engine early.
"Son, in life you do not fight battles because you expect to win, you fight them merely because they need to be fought." -- Snagglepuss
Image

User avatar
jobbautista9
Lunatic
Lunatic
Posts: 345
Joined: 2020-11-03, 06:47
Location: Philippines
Contact:

Re: guitarcenter.com / jQuery errors / Style issue

Post by jobbautista9 » 2021-05-14, 14:48

Moonchild wrote:
2021-05-14, 14:14
jobbautista9 wrote:
2021-05-14, 13:43
You can use multiple rel attributes AFAIK
Where did you get that information? AFAIK you can't have more than one rel attribute.
I mean multiple rel values, sorry if that wasn't clear. W3C allows this:
W3C wrote: rel = link-types [CI]
This attribute describes the relationship from the current document to the anchor specified by the href attribute. The value of this attribute is a space-separated list of link types.

Moonchild wrote:
2021-05-14, 14:14
The proper (also according to MDN) way to preload, if you insist on it despite its experimental nature, would be t do it this way:
First, issue the preload, so the browser can preload the stylesheet if the feature is supported...

Code: Select all

<link rel="preload" href="style.css" as="style">
Then list a regular stylesheet link to link the css.

Code: Select all

<link rel="stylesheet" href="style.css">
Sorry if I misunderstood something, but wouldn't

Code: Select all

<link rel="preload stylesheet" href="style.css" as="style">
achieve the same thing? Or is this not allowed for stylesheets?
Cyndaquil is the best starter, except in Pokemon Mystery Dungeon, which sucks. I still love PMD though!

Developer of Ambassador in Window Menu, BrowserTickTock, CacheSwitch, Chrome Navigator, Cite4Wiki, Clickity Touch 'n Push, ColorPili, EditDatContent, EditDatTitle, Esrever, Go Menu, User Agent Status, Website Navigation Bar, and Yet Another about:config Helper.

My PGP public key (My copy on rw.rs)

Avatar by @MaxiOrphy of Instagram.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 30216
Joined: 2011-08-28, 17:27
Location: Tranås, SE
Contact:

Re: guitarcenter.com / jQuery errors / Style issue

Post by Moonchild » 2021-05-14, 14:51

jobbautista9 wrote:
2021-05-14, 14:48
Sorry if I misunderstood something, but wouldn't
Code: Select all
<link rel="preload stylesheet" href="style.css" as="style">
achieve the same thing? Or is this not allowed for stylesheets?
I don't know off-hand. maybe you should try it? :)
It gets kind of fuzzy when dealing with multiple keywords if they are inherently conflicting. Saving a few bytes combining 2 <link> elements really isn't worth the hassle, IMHO. Same for the onload= trick, same deal.
"Son, in life you do not fight battles because you expect to win, you fight them merely because they need to be fought." -- Snagglepuss
Image

Post Reply