Non-www to www redirect not working in Firefox; Works in Chrome with nginx server

Question

Dear fellow webmasters,

I'm facing a very strange problem. I've configured my website to have https with www scheme. I opted to redirect all the traffic from non-www to www, at the time of setting up LetsEncrypt SSL certificate and it works absolutely fine on Chrome (both desktop and mobile).

However, one of my site's member informed me that if they enter the non-www url in Firefox or Safari, I get Not-Secure server error. I tested and found out that Firefox and Safari refuse to redirect the site from non-www to proper https with www url like Chrome does.

How do I fix this issue? Here's my nginx configuration

server {

root /var/www/ce/public;

add_header X-Frame-Options "SAMEORIGIN";
add_header X-XSS-Protection "1; mode=block";
add_header X-Content-Type-Options "nosniff";
add_header "Access-Control-Allow-Origin" "*";

index index.php index.html index.htm index.nginx-debian.html;

server_name www.example.com;

client_max_body_size 2M;

location / {
    try_files $uri $uri/ /index.php?$query_string;
}

location ~ \.php$ {
    include snippets/fastcgi-php.conf;
    fastcgi_pass unix:/run/php/php7.2-fpm.sock;
}

location ~ /\.ht {
    deny all;
}

listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/www.example.com-0001/fullchain.pem; # 
managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/www.example.com-0001/privkey.pem; # 
managed by Certbot
include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot


server {
if ($host = example.com) {
      return 301 https://$host$request_uri;
} # managed by Certbot


if ($host = www.example.com) {
    return 301 https://$host$request_uri;
} # managed by Certbot



server_name www.example.com example.com;
listen 80;
listen [::]:80;
return 404; # managed by Certbot
}

Would really appreciate your help in fixing this problem. Thank you!