nginx returns custom 503 page in base64 encoded string insted of just html

i have a strange behavoiur on nginx when i try to implement a custom 503 error page for my maintenance period on nginx.

my custom page is placed on /opt/app_name/maintenance_on.html

my nginx config looks like this:

server {
listen 80;

server_name app-name;
root /opt/app_name;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Real-IP $remote_addr;
add_header X-Frame-Options "SAMEORIGIN";
add_header X-XSS-Protection "1; mode=block";
proxy_set_header X-Client-IP $remote_addr;
proxy_set_header HTTP_X_FORWARDED_HOST $remote_addr;


access_log  /var/log/nginx/app-name-access.log;
error_log       /var/log/nginx/app-name-error.log;

proxy_buffers   16  64k;
proxy_buffer_size   128k;

proxy_read_timeout 900s;
proxy_connect_timeout 900s;
proxy_send_timeout 900s;


proxy_next_upstream error   timeout invalid_header  http_500    http_502
http_503;

types {
 text/less less;
 text/scss scss;
}

gzip    on;
gzip_min_length 1100;
gzip_buffers    4   32k;
gzip_types  text/css text/less text/plain text/xml application/xml applicatio>
gzip_vary   on;
client_header_buffer_size 4k;
large_client_header_buffers 4 64k;
client_max_body_size 0;

location / {
 if (-f /opt/app_name/maintenance_on.html) {
 return 503;
 }
 proxy_pass    http://127.0.0.1:XXXX;

 proxy_redirect off;
}

location /longpolling {
 proxy_pass http://127.0.0.1:XXXX;
}
location ~* .(js|css|png|jpg|jpeg|gif|ico)$ {
 expires 2d;
 proxy_pass http://127.0.0.1:XXXX;
 add_header Cache-Control "public, no-transform";
}

location ~ /[a-zA-Z0-9_-]*/static/ {
 proxy_cache_valid 200 302 60m;
 proxy_cache_valid 404      1m;
 proxy_buffering    on;
 expires 864000;
 proxy_pass    http://127.0.0.1:XXX;
}

error_page 503 @maintenance;
location @maintenance {
 rewrite ^(.*)$ /maintenance_on.html break;
}
}

the page looks like this:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8">
    <title>Performing Maintenance</title>
    <style type="text/css">
        body { text-align: center; padding: 150px; }
        h1 { font-size: 40px; }
        body { font: 20px Helvetica, sans-serif; color: #333; }
        #article { display: block; text-align: left; width: 650px; margin: 0 au>
        a { color: #dc8100; text-decoration: none; }
        a:hover { color: #333; text-decoration: none; }
    </style>
</head>
<body>
<div id="article">
    <h1>The system is currently getting some Updates.</h1>
    <div>
        <p>We apologize for the inconvenience, but we're performing some mainte>
        <p>&mdash; Maintainer</p>
    </div>
</div>
</body>
</html>

The Problem i face with this configuration is that the nginx redirects to the 503 as expected but the response contains the html page as a base64 encoded string instead of the page as html. So the browser does not show anything.