SSM States breaking on browser zoom

[amartinezatcpo]

When FF and IE are zoomed in or out, ssm.getBroswerWidth() value returned is 0 which prevents the states from firing correctly.

[jonathan-fielding]

Hi, I am working on this, its a big fix I am afraid but it fits well with some big changes I was planning to the code so will keep you updated

[amartinezatcpo]

Great, thanks! SSM has been indispensable in our company executing responsive design.

[jonathan-fielding]

Awesome, would love to see some of sites you have built

[jonathan-fielding]

Hi Can you let me know what version of FF you were using

[amartinezatcpo]

It was FF 27 or 28. Hope this helps.

Sent from my iPhone

On Jun 5, 2014, at 10:34 PM, Jonathan Fielding notifications@github.com wrote:

Hi Can you let me know what version of FF you were using

— Reply to this email directly or view it on GitHub https://github.com/SimpleStateManager/SimpleStateManager/issues/20#issuecomment-45304403 .

[jonathan-fielding]

Sure, reason I wasnt able to replicate is it appears to be fixed in my branch so im just finishing off the other stuff then i will do a release

[amartinezatcpo]

Great, looking forward to the fix! You can preview my use / implementation on www.cpodewalt.com

[jonathan-fielding]

Ok releasing now

[timstl]

I am still seeing this problem with version 2.2.6. Below is the setup I have. If I load the page while zoomed in or zoom in after page load (to 125%) the mobile state fires, desktop does not. Seeing this in both IE11 and FireFox. Zooming back out to 100% fires desktop.

Going to dive in deeper later today to see if I can find the source of the problem or a workaround, but if anyone has any ideas please share. Thanks.

(function(){
    ssm.addState({
        id: 'mobile',
        maxWidth: 767,
        onEnter: function()
        { 
            runMobile(); 
        }
    });

    ssm.addState({
        id: 'tablet',
        minWidth: 768,
        maxWidth: 959,
        onEnter: function() 
        { 
            runTablet();
        }
    });

    ssm.addState({
        id: 'desktop',
        minWidth: 960,
        onEnter: function() 
        { 
            runDesktop();
        }
    });

    ssm.ready();
}());

[timstl]

Some additional info: It looks like the source of the problem is the getWidth function.

    var getWidth = function () {
        var x = 0;

        if(testForMatchMedia){

            //Browsers that support match media we will test our method does same as media queries
            if(window.matchMedia('(width:'+window.innerWidth+'px)').matches){
                x = window.innerWidth;
            }
            else if(window.matchMedia('(width:'+window.innerWidth+'px)').matches){
                x = window.outerWidth;
            }
            else if(window.matchMedia('(width:'+document.body.clientWidth+'px)').matches){
                x = document.body.clientWidth;
            }
        }
        else if (typeof(document.body.clientWidth) === "number") {
            // newest gen browsers
            x = document.body.clientWidth;
        }
        else if( typeof( window.innerWidth ) === "number" ) {
            x = window.innerWidth;
        }
        else if( document.documentElement && document.documentElement.clientWidth ) {
            //IE 6+ in 'standards compliant mode'
            x = document.documentElement.clientWidth;
        }

        return x;
    };

In my case testForMatchMedia passes, but none of the 3 nested conditions are met so x is still 0 when it's returned.

My temporary solution was to default to x = window.innerWidth; if none of those pass, but I am sure there is a better way.

[jonathan-fielding]

Ok I will look into this further too,

[jonathan-fielding]

Just an update, while I am not getting 0 while zoomed in, in FF I am not getting a zoomed in width either I am simply getting the default browser width, trying to figure how how i can get zoomed in width

[nicola-chilton]

Hi there, is there an update on this issue? It's such a great tool, but I believe I am experiencing the same problem as timstl. Thanks.

[jonathan-fielding]

Unfortunately it appears to be a firefox bug, still investigating though to see if their is a work arround

[nicola-chilton]

Thanks for getting back to me Jonathan. As timstl said before, I too am also experiencing the issue in IE11 but not on all machines.

[jonathan-fielding]

So the code that causes this bug is the code that supports legacy Internet Explorer, unfortunately doesnt look like I can easily fix that SO I will be discontinuing support for legacy Internet Explorer in SSM3 which I expect to be ready by mid may.

[jonathan-fielding]

The getWidth method is completely gone from SSM3

[jonathan-fielding]

and SSM3 will feature support for the full breadth of MQL4 spec

[jonathan-fielding]

fixed in 2.4.1 thanks to jdbryner