Retina js sets width and height to 0 for bootstrap tabs

Question

I'm using Retina.js(http://retinajs.com/) on a page with bootstrap tabs. While it loads the correct images for the first tab, the other tabs load the correct images (i.e. 2x) but have height and width set to 0. How can I fix this? Is there something that can be triggered on tab change?

This thread (https://github.com/imulus/retinajs/issues/90) suggested changing hidden tabs height to 0 and overflow:hidden instead of display:none. Not sure how to change my bootstrap tabs event to do this - any ideas?

Answer 1

I had a similar issue, and was able to correct it with this CSS:

.tab-content>.tab-pane {
   display: block;
   height: 0px;
   overflow: hidden;
}
.tab-content>.active {
    height: auto;
    overflow: auto;
}

Answer 2

The issue with retina.js v1.3.0 is that it is a bit outdated and bugs like these still haven't been resolved. So it is best to use a newer and better version of it available at imulus.

However, there is another way of solving this issue in the plugin itself:

(c.el.setAttribute("width",c.el.offsetWidth), c.el.setAttribute("height",c.el.offsetHeight))

You should replace offsetWidth and offsetHeight with naturalWidth and naturalHeight and this will prevent images from getting width and height of 0 every time they are redisplayed.

I hope this helps, I know am a bit too late with the answer, but it helped me solve the issue.