Style (or something?) messed up, no errors anywhere to indicate why

Nextcloud version (eg, 18.0.2): 18.0.4
Operating system and version (eg, Ubuntu 20.04): Debian 10
Apache or nginx version (eg, Apache 2.4.25): nginx 1.14.2
PHP version (eg, 7.1): 7.3.14

The issue you are facing:
When I logged into my NextCloud instance today, it seems that the stylesheet (or something) is pretty seriously messed up. The fonts are wrong and the menus do not have background, so they clip with the contents of the elements below them.
image
image
Is this the first time you’ve seen this error? (Y/N): Y

Steps to replicate it:

  1. Go to Web address of NC instance
  2. Log in

The output of your Nextcloud log in Admin > Logging:
image
The output of your config.php file in /path/to/nextcloud (make sure you remove any identifiable information!):

config.php:
<?php
$CONFIG = array (
  'instanceid' => '<del>',
  'passwordsalt' => '<del>',
  'secret' => '<del>',
  'trusted_domains' =>
  array (
    0 => '<del>.org',
  ),
  'datadirectory' => '/var/www/<del>.org/data',
  'dbtype' => 'mysql',
  'version' => '18.0.4.2',
  'overwrite.cli.url' => 'https://<del>.org',
  'dbname' => '<del>',
  'dbhost' => '<del>',
  'dbport' => '',
  'dbtableprefix' => 'oc_',
  'dbuser' => '<del>',
  'dbpassword' => '<del>',
  'installed' => true,
  'memcache.local' => '\\OC\\Memcache\\APCu',
  'twofactor_enforced' => 'false',
  'twofactor_enforced_groups' =>
  array (
  ),
  'twofactor_enforced_excluded_groups' =>
  array (
  ),
  'maintenance' => false,
  'mail_smtpmode' => 'smtp',
  'mail_smtpsecure' => 'tls',
  'mail_sendmailmode' => 'smtp',
  'mail_from_address' => '<del>',
  'mail_domain' => '<del>',
  'mail_smtpauthtype' => 'LOGIN',
  'mail_smtpauth' => 1,
  'mail_smtphost' => '<del>',
  'mail_smtpport' => '587',
  'mail_smtpname' => '<del>',
  'mail_smtppassword' => '<del>',
  'theme' => '',
  'loglevel' => 2,
  'mysql.utf8mb4' => true,
);

The output of your Apache/nginx/system log in /var/log/____:

/var/log/nginx/error.log:
2020/05/07 08:51:21 [notice] 9540#9540: signal process started
2020/05/07 08:55:52 [notice] 9615#9615: signal process started
2020/05/07 09:07:59 [error] 9616#9616: *2927 access forbidden by rule, client: <del>, server: <del>.org, request: "GET /data/.ocdata?t=1588856879950 HTTP/1.1", host: "<del>.org"

Just for the sake of reference, here’s my nginx config (more or less identical to the reference config but with some settings changed for letsencrypt and some SSL hardening):

/etc/nginx/sites_enabled/<del>.org
upstream php-handler {
	server unix:/var/run/php/php7.3-fpm.sock;
}

server {
	listen 80;
	listen [::]:80;
	server_name <del>.org;
	return 308 https://$server_name$request_uri;
}
server {
	listen 443 ssl http2;
	listen [::]:443 ssl http2;
	server_name <del>.org;

	ssl_certificate /etc/letsencrypt/live/<del>.org/fullchain.pem;
	ssl_certificate_key /etc/letsencrypt/live/<del>.org/privkey.pem;
	ssl_ciphers 'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH';
	ssl_dhparam /etc/nginx/ssl/dhparam.pem;
	ssl_protocols TLSv1.1 TLSv1.2;
	ssl_prefer_server_ciphers on;

	add_header Referrer-Policy "no-referrer" always;
	add_header X-Content-Type-Options "nosniff" always;
	add_header X-Download-Options "noopen" always;
	add_header X-XSS-Protection "1; mode=block" always;
	add_header X-Frame-Options "SAMEORIGIN" always;
	add_header X-Permitted-Cross-Domain-Policies "none" always;
	add_header X-Robots-Tag "none" always;
	add_header Strict-Transport-Security "max-age=15552000; includeSubdomains; ";

	fastcgi_hide_header X-Powered-By;

	root /var/www/<del>.org;

	location = /robots.txt {
		allow all;
		log_not_found off;
		access_log off;
	}

	location = /.well-known/carddav {
		return 308 $scheme://$host:$server_port/remote.php/dav;
	}
	location = /.well-known/caldav {
		return 308 $scheme://$host:$server_port/remote.php/dav;
	}
	location ~ ^/.well-known/acme-challenge/* {
		allow all;
	}

	client_max_body_size 512M;
	fastcgi_buffers 64 4K;

	gzip on;
	gzip_vary on;
	gzip_comp_level 4;
	gzip_min_length 256;
	gzip_proxied expired no-cache no-store private no_last_modified no_etag auth;
	gzip_types application/atom+xml application/javascript application/json application/ld+json application/manifest+json application/rss+xml application/vnd.geo+json application/vnd.ms-fontobject application/x-font-ttf application/x-web-app-manifest+json application/xhtml+xml application/xml font/opentype image/bmp image/svg+xml image/x-icon text/cache-manifest text/css text/plain text/vcard text/vnd.rim.location.xloc text/vtt text/x-component text/x-cross-domain-policy;

	location / {
		rewrite ^ /index.php;
	}
	location ~ ^\/(?:build|tests|config|lib|3rdparty|templates|data)\/ {
		deny all;
	}
	location ~ ^\/(?:\.|autotest|occ|issue|indie|db_|console) {
		deny all;
	}
	location ~ ^\/(?:index|remote|public|cron|core\/ajax\/update|status|ocs\/v[12]|updater\/.+|oc[ms]-provider\/.+)\.php(?:$|\/) {
		fastcgi_split_path_info ^(.+?\.php)(\/.*|)$;
		set $path_info $fastcgi_path_info;
		try_files $fastcgi_script_name =404;
		include fastcgi_params;
		fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
		fastcgi_param PATH_INFO $path_info;
		fastcgi_param HTTPS on;
		fastcgi_param modHeadersAvailable true;
		fastcgi_param front_controller_active true;
		fastcgi_pass php-handler;
		fastcgi_intercept_errors on;
		fastcgi_request_buffering off;
	}
	location ~ ^\/(?:updater|oc[ms]-provider)(?:$|\/) {
		try_files $uri/ =404;
		index index.php;
	}
	location ~ \.(?:css|js|woff2?|svg|gif|map)$ {
		try_files $uri /index.php$request_uri;
		add_header Cache-Control "public, max-age=15778463";
		add_header Referrer-Policy "no-referrer" always;
		add_header X-Content-Type-Options "nosniff" always;
		add_header X-Download-Options "noopen" always;
		add_header X-Frame-Options "SAMEORIGIN" always;
		add_header X-Permitted-Cross-Domain-Policies "none" always;
		add_header X-Robots-Tag "none" always;
		add_header X-XSS-Protection "1; mode=block" always;
		access_log off;
	}
	location ~ \.(?:png|html|ttf|ico|jpg|jpeg|bcmap)$ {
		try_files $uri /index.php$request_uri;
		access_log off;
	}
}

Interestingly enough, there are no errors in the browser console (either Chrome or Firefox), except one that is expected. This issue persists across browsers, computers, fresh profiles, no extensions/add-ons, clearing browser cache, clearing Cloudflare cache, etc. I have no idea what else to do save for a completely fresh NC install, which is a bit of a pain because I support other users on this installation.

Please use in your browser function key F12 and than look network (all files loaded with HTTP-200?) and look “Inspektor” for HTML-code.

From my original post:

Interestingly enough, there are no errors in the browser console (either Chrome or Firefox), except one that is expected.

This includes resources not loading correctly.

Ok. Sorry.

Just as a follow-up tidbit of information: everything works fine. Nothing’s broken on the front- or backend. It just looks terrible.

I have this same exact issue, using Docker with image nextcloud:19.0-fpm-alpine, which currently corresponds to version 19.0.2.

Happens on Firefox (80), Firefox without addons and protections turned off (private window). Also happens on Chromium (MS Edge).

I am not sure the logs are helpful here: there is a bunch of stuff in them, but nothing seems to be related to this issue.

Temporary solution: Checking the logs, I logged into my admin account which happens to use the Dark theme (from Accessibility settings). This works and solves the issue.

From this, it seems the issue is with the standard theme?

See Update variables.scss - Fallback font before Noto Color Emoji by kaktuspalme · Pull Request #25418 · nextcloud/server · GitHub

tl;dr: Edit /var/www/nextcloud/core/css/variables.scss, move ‘Noto Color Emoji’ after sans-serif on the line that starts with ‘$font-face’, save it, and reload the webpage on your client. No need to restart anything on your server.

Hi I get exactly the same display errors, did you get any clue to solve this issue?