javascript - How to prevent zooming in popup window in my Chrome Extension - Stack Overflow

I just noticed that if I zoom up the web page in a tab (by doing Ctrl-Plus) and then open the popup window for my Chrome Extension it also gets scaled up. Unfortunately that makes it display a vertical and, at larger scale, even a horizontal scrollbar.

I see that other extensions somehow block this zooming by displaying their popups at 100% zoom only. The question is how to do it?

I just noticed that if I zoom up the web page in a tab (by doing Ctrl-Plus) and then open the popup window for my Chrome Extension it also gets scaled up. Unfortunately that makes it display a vertical and, at larger scale, even a horizontal scrollbar.

I see that other extensions somehow block this zooming by displaying their popups at 100% zoom only. The question is how to do it?

• javascript
• css
• google-chrome
• google-chrome-extension
• popupwindow

Share Follow asked Sep 18, 2014 at 4:57 c00000fdc00000fd 22.4k3737 gold badges203203 silver badges442442 bronze badges 7

• 1 How about people who really need to zoom the pop-up? Think about accessibility. – Teemu Commented Sep 18, 2014 at 5:00
• @Teemu: OK, I agree. But then I need to have popup window scale up too and not just show those ugly scrollbars. Is there a way to prevent that instead? – c00000fd Commented Sep 18, 2014 at 5:06
• use % instead of px it will prevent scroll bar for pop up and maintain the size – himanshu Commented Sep 18, 2014 at 5:36
• @himanshu: Use % where? I'm not setting the size of the popup window at all. – c00000fd Commented Sep 18, 2014 at 5:39
• sorry then i dont know the answer – himanshu Commented Sep 18, 2014 at 5:44

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 6

Quick note for whoever is interested how I solved it.

First, a little detail about Chrome that I just learned. To zoom a plug-in's popup window one needs to open its Options window from the Chrome's Settings and zoom it in or out. Then, even when the Options page is closed, that corresponding plug-in will retail the zoom. To restore it, simply restore zoom on the Options page. Cool, hah! Too bad though that many plug-ins are not designed to handle it correctly. As I mentioned in my original question most display weird looking scrollbars or simply distort the content.

Here's how I overcame it in my plug-in:

First you need to determine the current zoom of the popup window. (The following is tested only on Chrome, taken from this post):

function getPageZoom()
{
    //RETURN: 1.0 for 100%, and so on
    var zoom = 1;

    try
    {
        var svg = document.createElementNS('http://www.w3/2000/svg', 'svg');
        svg.setAttribute('xmlns', 'http://www.w3/2000/svg');
        svg.setAttribute('version', '1.1');
        document.body.appendChild(svg);
        zoom = svg.currentScale;
        document.body.removeChild(svg);
    }
    catch(e)
    {
        console.error("Zoom method failed: " + e.message);
    }

    return zoom;
}

Then create a scrollable DIV to place your popup window content in that you'd be OK with if it scrolled:

#mainSection{
    margin: 0;
    padding: 0;
    overflow-y: auto;       /* The height will be defined in JS */
}

<div id="mainSection">
</div>

Then set the scrollable DIV's maximum height with a small scaling calculation using the page zoom. Do so as soon as the DOM loads, say, from onLoad() event, or within jQuery's $(function(){});:

//Get page zoom
var zoom = getPageZoom();

//Using jQuery
var objMain = $("#mainSection");

//Calculate height & offsets of elements inside `mainSection` 
//using jQuery's offset() and outerHeight()
//Make sure to multiply results returned by zoom

var offsetElement1 = $("someElement1").offset().top * zoom;
var heightElement2 = $("someElement2").outerHeight() * zoom;

//Apply the calculations of the height (in real situation you'll obviously do more...)
var height = offsetElement1 + heightElement2;

//And finally apply the calculated height by scaling it back down
var scaledHeight = height / zoom;

//Need to convert the result to an integer
scaledHeight = ~~scaledHeight;

//And set it
objMain.css("max-height", scaledHeight  + 'px');

All this should show a nice vertical scrollbar only where you want it when a user chooses a larger zoom.

And lastly you need to make sure that if a user starts zooming the extension's Options page while your popup window is displayed, you need to close it. I chose this method:

    $(window).resize(function()
    {
        var zoom = getPageZoom();

        //Multiply zoom by 100 (to round it to 2 decimal points) and convert to int
        var iZoom = zoom * 100;
        iZoom = ~~iZoom;

        if(window.izoom &&
            iZoom != window.izoom)
        {
            //Close popup
            window.close();
        }

        window.izoom = iZoom;
    });