Mobile view blank white page when going back

[orby]

We are currently facing a technical issue with our Shopify store that is specifically affecting users on Apple mobile devices. When these users browse products on their mobiles and attempt to return to the previous page by hitting the back button, they are confronted with a blank screen. This issue seems to be exclusive to Apple devices, as it does not occur on Android smartphones.

A customer using an iPhone browses through the different products on our Shopify store. After viewing a product, they decide to go back to the product list by pressing the back button on their Safari browser. Instead of returning to the previous page as expected, they are presented with a blank screen. The content only reappears after they refresh the page. This issue disrupts the shopping experience and could potentially affect our store's user engagement and sales on Apple devices.

[Team_OSC]

Hi @orby 

This issue is likely related to how Safari handles the back button and cached pages on iOS devices. Here are some possible reasons and solutions:

### Reasons

1. **Page Cache Handling**: Safari on iOS has a unique way of handling the back-forward cache (bfcache), which is used to quickly load pages from memory when navigating with the back and forward buttons. If there's an issue with how the page is cached or restored, it might lead to a blank screen.

2. **JavaScript Issues**: If your Shopify store relies heavily on JavaScript, there might be problems with scripts not reinitializing correctly when the page is loaded from the bfcache.

3. **DOM Manipulations**: Any dynamic changes made to the DOM (Document Object Model) might not be restored correctly when navigating back, leading to a blank page.

4. **Shopify Themes and Plugins**: Certain themes or plugins might have issues with how they handle state or page reinitialization, causing content to disappear upon navigating back.

### Solutions

1. **Check for JavaScript Errors**: Open the Safari Developer Tools (Settings > Safari > Advanced > Web Inspector) to see if there are any JavaScript errors or warnings when the user navigates back to the product list. Fixing these errors might resolve the issue.

2. **Disable Unnecessary Scripts**: Test if the issue persists with a basic theme or with some scripts disabled. This can help identify if a particular script or plugin is causing the problem.

3. **Use Page Lifecycle Events**: Implement the Page Lifecycle API to handle the restoration of the page state correctly. Specifically, listen for the `pageshow` event, which is fired when the page is loaded from the bfcache, and reinitialize any dynamic content.

```javascript
window.addEventListener('pageshow', function(event) {
if (event.persisted) {
// Reinitialize your content or scripts here
}
});
```

4. **Ensure Proper Cache Settings**: Check your cache settings to ensure they are not interfering with how the pages are stored and restored. For instance, setting proper cache headers might help.

5. **Update Themes and Plugins**: Make sure all themes and plugins are up-to-date, as developers often release fixes for such issues.

6. **Testing on Other Devices and Browsers**: Verify if the issue is specific to Safari on iOS. Test on other devices and browsers to rule out any general issues with your Shopify store.

By addressing these potential issues, you should be able to provide a smoother shopping experience for your customers using Apple devices.

Regards

Team_OSC

[MRamzan]

I have solved it here. You can copy paste this code by following the video tutorial:

<style> 
    html,body {
        opacity: 1 !important;
    }
</style>