WEIRD Iphone Safari back button bug with possible Cloudflare incompatibility

Website, Application, Performance
1

Long story short: For example, A landing page called page A and is accessed directly, After clicking something on page A, The IOS safari browser takes you to page B, Then when back button is clicked the browser takes you back to page A, And then all search boxes and select option dropdowns on page A will no longer work, Unless you refresh the page.

Key notes:

1, This does not happen in any PC or Android devices and happens to all of the latest IOS versions, Presumably Any version later than IOS 15.

2, Given how IOS back button works, This isn’t technically an IOS bug, The following code would fix the problem in most cases.

    (function () {
    window.onpageshow = function(event) {
        if (event.persisted) {
            window.location.reload();
        }
    };
})();

3, I have done the following to locate the problem, Lane by lane eventually Wiping out every single line of code of the entire project, And added a simple form with a search box and a submit button to index.html with no css, no js, no backend, nothing except the following code:

<form>
    <input type="text" name="search">
    <button type="submit">Go</button>
</form>

If you type anything in the search box click go and then click the back button, The search box will no longer be responsive(The keyboard will no longer pop up), Same with select-option dropdowns.

Here is what I found, This bug seem to only exists to websites that uses Cloudflare, At first I thought it was the cache, I have purged all caches on Cloudflare, Clicked developer mode to temporarily disable the cache, It didn’t work, That’s when I deleted everything except an index.html with a simple form, The problem persists, And since websites that has nothing to do with Cloud flares don’t seem to experience such bugs, It might have something to do with Cloudflare, It also doesn’t make sense a proxy service like Cloudflare would cause a simple html page to bug with IOS back button, But it can’t be the code either, Every single line of code was deleted except a simple html test form with no CSS no JS nothing, What’s causing it?

2

In Developer mode ALL Cloudflare features are turned off, just routing stays. So if it persists in developer mode it very likely is not a Cloudflare bug.

Since JS is all the same crossdevice it should be broken on android aswell, if Cloudflare would have broke it.

If you are willing to share the domain, someone here could look into it.

3

I could not edit this post so i started a new post, I have further identified the problem, More on Cloudflare https full strict might bug with IOS back button

4

I made a similar post a few days ago, Could not find the edit button so I’m starting a new post, Now I have further identified this problem, And pretty sure It is Cloudflare related given how IOS back button works differently than Android, This causes bugs.

Original post:

Long story short: For example, A landing page called page A and is accessed directly, After clicking something on page A, The IOS safari browser takes you to page B, Then when back button is clicked the browser takes you back to page A, And then all search boxes and select option dropdowns on page A will no longer work, Unless you refresh the page.

This does not happen in any PC or Android devices and happens to all of the latest IOS versions, Presumably Any version later than IOS 15.

Given how IOS back button works, This isn’t technically an IOS bug, The following code would fix the problem in most cases.

   (function(){window.onpageshow = function(event){if (event.persisted){             window.location.reload();}};})();

The werid part:

I have done the following to locate the bug, Lane by lane eventually Wiping out every single line of code of the entire project, And added a simple form with a search box and a submit button to index.html with no css, no js, no backend, nothing except the following code:

<form>
    <input type="text" name="search"> 
    <button type="submit">Go</button>
</form>

If you type something in the search box and click go and then click the back button, The search box will no longer be responsive(The keyboard will no longer pop up), Same with select-option dropdowns.

Here is what I found, This bug seem to only exists to websites that uses Cloudflare, At first I thought it was the cache, I have purged all caches on Cloudflare, Clicked developer mode to temporarily disable the cache, It didn’t work, That’s when I deleted everything except an index.html with a simple form, The problem persists, And since websites that has nothing to do with Cloud flares don’t seem to experience such bugs, It might have something to do with Cloudflare, It also doesn’t make sense a proxy service like Cloudflare would cause a simple html page to bug with IOS back button, But it can’t be the code either, Every single line of code was deleted except a simple html test form with no CSS no JS nothing, What’s exactly is causing this bug?

New:
After turning off proxies on Cloudflare and changed Nginx configuration from https to http, The problem disappeared, Here are the changes in the configuration:

from:

map $sent_http_content_type $expires {
    default                    off;
    text/html                  epoch;
    text/css                   60d;
    application/javascript     60d;
    ~image/                    max;
    ~font/                     max;
}


server {
        listen 80 default_server;
        listen [::]:80 default_server;

        expires $expires;

        server_name _;
        return 301 https://example.com$request_uri;
}

server {
        listen [::]:443 ssl http2;
        listen 443 ssl http2;

        expires $expires;

        server_name example.com www.example.com;

        # SSL configuration
        ssl_certificate         /etc/ssl/cert.pem;
        ssl_certificate_key     /etc/ssl/key.pem;
        ssl_client_certificate /etc/ssl/cloudflare.crt;
        ssl_verify_client on;

        location = /favicon.ico { access_log off; log_not_found off; }

        location /static/ {root /home/ubuntu/example;}

        location /media/ {root /home/ubuntu/example;}

        location / {
          proxy_pass         http://unix:/run/gunicorn.sock;
          proxy_redirect     off;

          proxy_set_header   Host              $http_host;
          proxy_set_header   X-Real-IP         $remote_addr;
          proxy_set_header   X-Forwarded-For   $proxy_add_x_forwarded_for;
          proxy_set_header   X-Forwarded-Proto https;
        }
        if ($host = www.example.com) {
          return 301 https://example.com$request_uri;
        }
}

To:

server {
    listen 80;
    server_name example.com www.example.com;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        root /home/ubuntu/example.com;
    }

    location /media/ {
        root /home/ubuntu/example.com;    
    }

    location / {
        include proxy_params;
        proxy_pass http://unix:/run/gunicorn.sock;
    }

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

Settings in Cloudflare:

SSL/TLS encryption mode: Full (strict)

Authenticated Origin Pulls: On

Still working on further identifying the problem.

5

Still locked for days until I can transfer domain out of Coudflare, I have the website hosted on AWS lightsail with ubuntu nginx,The bug being every time the backbutton is clicked on an IOS safari browser, The previous page would not work properly afterwards(search bar and dropdown not clickable), No other web service has this problem with exact same configurations, AWS DNS works fine, Namecheap DNS works fine, Only Cloudflare has problems even with everything paused and DNS only A records, It still causes this bug, Does anyone know fundamentally what’s going on ?

6

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.