Opera bugs

This page contains list of annoying Opera bugs. Contact me if you find something interesting or one of this bugs was fixed. @azproduction

1. Opera displays "Loading..." mode

If you trying to preload image in background without inserting in in document. Same with style, iframe, script and css url resources. User can press Esc button to halt all resource loading — oh sh!t...

Example

window.onload = function () {
    var img = new Image();
    img.onload = function () { alert('Yey!'); };
    img.onerror = function () { alert('Doh!'); };
    img.src = 'http://cross-domain.com/1x1px.gif'; // Opera displays "Loading..." mode
};

How to fix (Crutche): You can preload resources via XHR. Crossdomain solution - imposible.

2. There is no onbeforeunload or onunload events

Example

index.html

<button onclick="window.open('1.html')">Do it</button>

1.html

<script>
window.onunload = function () {alert('window.onunload')}; // no alert in opera
window.onbeforeunload = function () {alert('window.onbeforeunload')}; // no alert in opera
</script>

How to fix onunload (Crutche): Monitor window.closed

var wnd = window.open('1.html'),
    int = window.setInterval(function () {
        if (wnd.closed !== false) { // You have to write !==
            window.clearInterval(int);
            alert('window.onunload');
        }
    }, 500);

How to fix onbeforeunload (Crutche): You can't detect window close - impossible to fix. But you can hook all on-page link clicks.

$('a').click(function () {
   alert('Some kind of window.onbeforeunload');
   return false; // cancel default event - browse page
});

3. Opera fires all hover events when user selects file via input file

How to fix

var $input = $('form input[type="file"]'), 
    isSelectingFile = false, // Use this flag in your hover events to detect that user browsing file or not
    watchMouseEnter = function () {
        $(document).unbind('mouseenter', watchMouseEnter);
        isSelectingFile = false;
    };

// click on input file opens file dialog
$input.bind('click', function () {
    isSelectingFile = true;
    // File not selected
    $(document).mouseenter(watchMouseEnter);
});

// File selected
$input.bind('change', function () {
    watchMouseEnter();
    // do your stuff...
});

4. Its possible to edit navigator.userAgent

How to fix use watch() on navigator.userAgent or emulate it using defineSetter or ES5 get or defineProperty

5. Impossible to show only location bar without browser controls in window.open

How to fix Emulate location bar in Opera via input[type="text"].

6. Impossible to scroll block with scrollbars via scrollTop when window lost focus

How to fix

/**
 * @param element
 * @param value
 */
var scrollIt = (function(){
    var blur = false;
    if ($.browser.opera) {
        $(window).bind('blur', function (){
            blur = true;
        });
        $(window).bind('focus', function (){
            window.setTimeout(function () {
                blur = false;
            }, 10);
        });
    }

    return function (element, value) {
        if (!blur) {
            element.scrollTop = value;
        } else {
            $(window).once('focus', function () {
                element.scrollTop = value;
            });
        }
    };
}());

7. When enters fullscreen mode each "in memory" Image lost its width and height attribute value

How to fix

var image = new Image();
image.src = 'http://ya.ru/favicon.ico';

// FIX: create attribute manually
image.onload = function () {
    image.width  = image.width;
    image.height = image.height;
};

function showWidth() {
    var p = document.createElement( 'p' );
    p.innerHTML = image.width + 'x' + image.height;
    document.body.appendChild( p );
}

window.setInterval(showWidth, 1000);
changed October 20, 2011