CODEWITHSUNDEEP
google-chromesvgsafariwebkitscaling
billdwhite
billdwhite

Reputation: 59

SVG bug in Webkit (chrome and safari): Image gets scaled and sized wrong when reloaded

I've got a toggle button image using a pair of SVG images that swap when the image is clicked. It works great everywhere, except in webkit browsers like Chrome and Safari.

I've created a fiddle showing the problem. On first load, the closed folder icon appears correctly. If you click it, it swaps out an 'open folder' svg. When you click again to close it, you get the first SVG again but now it is scaled up too large. This works correctly in IE and Firefox.

Any ideas what's wrong?

Here is the demo: http://jsfiddle.net/billdwhite/6gVPr/4/

Here is the code:

var folderOpened = false;                                    

var imageHolder = domConstruct.create("div",{
    "class": "svgImageHolder"
}, win.body());

var svgImage = domConstruct.create("img", {
    "class":"svgImage", 
    "src": "http://www.billdwhite.com/wordpress/wp-content/images/folder_closed.svg"
},
imageHolder);

on(svgImage, "click", function() {
    if (folderOpened) {
        folderOpened = false;
        svgImage.src = "http://www.billdwhite.com/wordpress/wp-content/images/folder_closed.svg";
    } else {
        folderOpened= true;
        svgImage.src = "http://www.billdwhite.com/wordpress/wp-content/images/folder_opened.svg"
    }
});

Upvotes: 1

Views: 2199

Answers (2)

Christoph Weigert
Christoph Weigert

Reputation: 73

I had the same problem as you described in your first post.

I found this Bug for Chromium https://src.chromium.org/viewvc/blink?revision=170728&view=revision / https://codereview.chromium.org/218693003

Currently I don't know any workaround you need to wait for a new Google Chrome Version (probably Chrome 35).

Upvotes: 1

methodofaction
methodofaction

Reputation: 72385

If you resize the window in your jsfiddle you will see that the faulty image is displayed correctly. This means it's a browser reflow issue, to work around the problem you can force the browser to reflow with:

    svgImage.style.display='none';
    svgImage.offsetHeight;
    svgImage.style.display='inline-block';

You can see it in action here: http://jsfiddle.net/BX8Sj/

Upvotes: 2

Related Questions