Opera: Altering img src attribute does not automatically update display?

When using javascript to swap images the HTML is updated fine but what Opera actually displays is not unless you scroll or resize the window. A picture of what happens when you scroll explains it best.

alt text http://img340.imageshack.us/img340/9455/87855188.png

Any ideas?

EDIT: The source of the problem seems to be that the image is inside a div that has float right.

EDIT2: This http://trac.dojotoolkit.org/ticket/3158 would suggest开发者_如何学Python that it's a bug that was fixed and is back again.

Odd, I've never experienced problems like that before. I think that is a combination between browser and the graphics card / GUI, I've had exactly this behaviour before but in all sorts of applications (OpenOffice), not only the browser.

Ideas on how to maybe trick it into updating:

• Set opacity to .99 and then back to 1
• Change position by 1px (jerky though)
• Set display to none and to block again (flickers, not nice, but to see whether it works)
• Move it off the screen for a (milli)second and back again (probably flickers)

I have faced the same problem. This seems to be a bug related with Presto based Opera versions (< 12.5). The src attribute of the img elements seems to be updating correctly but the changes are not reflected to DOM. Triggering reflows are sadly not working. Only detaching and reattaching the node seems to fix the problem. I have tried following that led to no avail:

• Change src to null, and then to new value,
• Change src to null, change position (top/left etc), change width/height,
• Trigger above with delay (i.e. 100ms delay between null and new value)
• Performing various combination of above with any order.

The only way that correctly fixed the problem was detaching related node from DOM and reinserting. Here is the piece of code if anyone needs:

var isOperaPresto = this.navigator.userAgent.includes("Opera") && this.navigator.userAgent.includes("Presto");

if(isOperaPresto)
{
    /* if browser is opera presto, updating image elements' sources will not upload the DOM visual.
    So we need to do some hacking. Only thing that works is to remove and reAppend the relevant node... */
    Object.defineProperty(HTMLImageElement.prototype, "src", {
        enumerable: true,
        configurable: true,
        get: function() {
            return this.getAttribute("src");
        },
        set: function(newSrc)
        {
            /*max-size confinement is required for presto if parent is display flex. Image will go out of its available size otherwise*/
            this.style.maxHeight = this.style.height;
            this.style.maxWidth = this.style.width;

            this.setAttribute("src", newSrc);

            /*we have to put this node back to exactly where we rip it from*/
            var parent = this.parentNode;
            if(this.nextElementSibling != null)
            {
                var reference = this.nextElementSibling;
                parent.removeChild(this);
                reference.insertAdjacentElement("beforebegin", this);
            }
            else
            {
                parent.removeChild(this);
                parent.appendChild(this);
            }
        }
    });
}