[Resolved] Site broken in Opera Mini

[Jim]

Hi. So I looked up my site on Opera Mini for Android and it looks broken. Never test before with this browser but saw 17% of my traffic is through this browser. Tried deactivating all plugins but I couldn’t figure out what the issue was. Used the default install of the browser.
Update: Site seems to show a bit proper when blog module is disabled.

[Tom]

Hi there,

I just checked it out on my Pixel and everything looks great. What about it is broken for you?

[Jim]

Hi Tom. It seems the data saving feature is the one breaking the site (for automatic and extreme options) and it comes enabled by default. It breaks my SVG icons in single posts, makes menu bar and archive excerpt only show halfway inside the browser and a few other issues. I am not sure how to tell users who use opera to disable or choose alternative options. Could you check with your browser with extreme and automatic data-savings mode (with ad blocker on) enabled respectively?

[Tom]

It looks like setting the data savings to extreme disables javascript on the site, which is likely why this is happening.

However, it shouldn’t be set to “Extreme” by default – mine was set to “Automatic” and worked nicely.

I’m not sure how we’d detect Extreme mode and change how the javascript works just for Opera. I’ll do some research.

[Jim]

It is also broken in automatic mode (on my phone maybe). But yeah, extreme feature and JS don’t play well. I am looking at an alternative way involving a dismissible message that appears in the header on mobile devices telling opera users to choose the high mode.

[Tom]

It looks like you can use javascript to do that: https://gist.github.com/ireade/10fe4b3c1e1caa9751a3

[Jim]

I tried to hook it but it shows the raw code on the front end. How Should I use it?

[Tom]

You could:

1. Create a Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. Set the hook to wherever you want your message to appear.
3. Add your content:

<div class="opera-message" style="display: none;">
    Your message in here
</div>

4. Set the Display Rules and publish.

Then:

1. Create another Hook Element.
2. Set the hook to wp_footer
3. Add this as the content:

<script>
    // Check if current browser is Opera
    var isOpera = window.opera | window.opr | ( navigator.userAgent.indexOf(' OPR/') > -1 ) | ( navigator.userAgent.indexOf(' Coast/') > -1 ) | ( navigator.userAgent.indexOf(' OPiOS/') > -1 );

    // Check if the Opera browser is Opera Mini or Opera Mobile in regular mode (called High Savings Mode)
    var isOperaHigh = (navigator.userAgent.indexOf('OPR/') > -1) && (navigator.userAgent.indexOf('Mobile') > -1) && (navigator.userAgent.indexOf('Presto/') < 0);

    // Check if the Opera browser is Opera Mini in Extreme Savings Mode
    var isOperaExtreme = (navigator.userAgent.indexOf('Opera Mini/') > -1) && (navigator.userAgent.indexOf('Presto/') > -1);

    if ( isOperaHigh || isOperaExtreme ) {
        document.querySelector( '.opera-message' ).setAttribute( 'style', 'display: block' );
    }
</script>

4. Set the Display Rules and publish.

[Jim]

I got it to display on opera and for a while, the message would disappear if ‘high’ or ‘off’ mode was selected in data savings but now it shows when all these modes are selected. Should the js above limit it to extreme and automatic modes? Or is there a way to modify it to just show on Extreme and Automatic modes?

[Tom]

According to the code, it should only display if it’s set to High or Extreme.

Does your site have any caching that could be conflicting?

[Jim]

I did a test with cache disabled but it still did not work. But I have shortened the message so that it shows in the header above the menu for opera users in a non-intrusive way. Opera Mini is popular in emerging markets and drives much traffic to sites but often is aggressive with data savings which break sites. Or could you have a suggestion on how to make the message have a close button?

[Tom]

A close button would require javascript and cookies (to remember that it’s been closed). This might help?: https://www.gmitropapas.com/generatepress-theme-tutorial-convert-the-top-widget-bar-into-a-notification-window/

[Jim]

Hi Tom. I found a workaround by modifying the initial code you provided and now I am able to display the message in Automatic and Extreme modes. Thanks for the help.

[Tom]

Awesome, you’re welcome! 🙂

[Author]

Posts