New Scientist site not displaying properly

For support with specific websites

Moderator: trava90

Forum rules
Please always mention the name/domain of the website in question in your topic title.
Please one website per topic thread (to help keep things organized). While behavior on different sites might at first glance seem similar, they are not necessarily caused by the same.

Please try to include any relevant output from the Toolkit Error Console or the Developer Tools Web Console using the following procedure:
  1. Clear any current output
  2. Navigate or refresh the page in question
  3. Copy and paste Errors or seemingly relevant Warnings into a single [ code ] block.
User avatar
zzz242
Apollo supporter
Apollo supporter
Posts: 33
Joined: 2018-06-21, 15:11

New Scientist site not displaying properly

Unread post by zzz242 » 2021-06-18, 06:49

About a month ago, New Scientist changed the way their website is displayed. Chrome and Edge had no problems with the change, but the site was almost unreadable under PM. A few days later, New Scientist changed their site again, and most of it could be read in PM as before. However, parts of the site still do not display properly under PM, although they display fine under Chrome and Edge. Specifically:
  1. The whole right column on the front page is displayed improperly, and the resulting confusion makes it difficult to use the links there or to quickly see what's going on.
  2. If you click on any of the stories (whether or not you are signed in), the bottom of the page from the phrase "More on these topics" on down is displayed improperly. Text is formatted wrong and displayed in the wrong place and images are expanded to fit the whole width of the browser window.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35479
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: New Scientist site not displaying properly

Unread post by Moonchild » 2021-06-18, 09:02

Have you contacted the website owners about their web compatibility issues?

EDIT: It looks like they are TRYING to do the right thing preloading style sheets, at least, but not quite:

Code: Select all

<link rel="preload" id="new-scientist-style-min-css" href="/build/css/core.min.css?ver=79b1fb3bee9b05059ba66fbdabc0d10df27db91e" 
type='text/css' media='all' as="style" onload="this.onload=null;this.rel='stylesheet';" />
<link rel="stylesheet" id="new-scientist-style-min-css" href="/build/css/core.min.css?ver=79b1fb3bee9b05059ba66fbdabc0d10df27db91e" 
type='text/css' media="all and (-ms-high-contrast: none), (-ms-high-contrast: active)"/>
assigning identical IDs and having an onload handler isn't quite right. Also, I don't think that would even apply on any browser that doesn't specifically implement the -ms-hish-contrast media query which will be the main reason in our case why the styling isn't applied causing the issues.

So what happens here in case link rel=preload isn't supported: the first (rel=preload) is ignored. the second (rel=stylesheet) isn't applied EXCEPT on Microsoft browsers that support the high contrast query. At the very least both should have the same media queries for consistency.
Easy fixes. I think the web designer tried to apply some cool shinies and made a few mistakes.
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

Locked