Elements resize on click/focus

[katrinkerber]

I am applying the box layout model to all elements (as outlined here http://paulirish.com/2012/box-sizing-border-box-ftw/) and then use the polyfill like so:

.ie.seven * {behavior: url(boxsizing.htc);}

It is now the second time I have come across the issue of elements resizing width-wise on click/focus. Removing the padding from the element fixes this.

[onesummer]

I see this same issue as well.

[lesjames]

I too have seen this issue. When applied to an the element resizes on focus.

[urazkines]

same issue here

[enginedigital]

anyone find a fix for this. it happens on text fields and even links for me.

[Schepp]

Can you send me a link? Couldn't replicate it here, so it seems to depend on the details. What I would generally suggest though is NOT to apply it to every single element. Since box-calculation will domino through all elements and that is slow and might also be the reason for your troubles. And I don't think that it is needed.

Remember: This is a stinky polyfill, not any high performing native implementation.

[enginedigital]

for now we've removed box-sizing from our text fields. and we only apply it to specific elements, definitely wouldnt put it on everything.

ill need to do some more testing to see what combination of elements etc cause this issue. hopefully narrow it down a bit more.

[juice49]

I get a similar problem every time I use both boxsizing.htc and Selectivizr (http://selectivizr.com/) on the same page. The resizing however occurs on hover for me. When the mouse rolls over certain DOM elements, they will decrease in size.

I've hacked the Selectivizr script in order to disable whatever it does on element mouseover. I do not fully understand what's going on, but it seems to fix my issues.

If you are using Selectivizr, try excluding it from the page and then see whether you still get the issue. It could of course be another script causing the problem.

[tadast]

I can confirm @juice49's case, happens to me as well, only when combined with selectivizr.

[joeyyax]

I also saw this happening when having a min-height set in the css.

[adamjgrant]

Also happening for me. I just attach this fix to specific classes, rather than every element. No selectivizr

[corysimmons]

Confirmed.

@juice49 fix works for the most part but it still explodes randomly and it definitely explodes when you change the layout in any way, form, or fashion. (responsive layouts die, using js animation breaks it, etc.)

Probably gonna drop selectivizr completely as I prefer box-sizing to nice selectors.

Sucks we can't have both.

Edit Actually has nothing to do with Selectivizr, box-sizing.htc just randomly resizes random elements on a page no matter what. Dropping box-sizing. Sucks to IE7.

[luksak]

I am currently facing this issue as well.

@juice49 Could you post how you removed the hover event from selectivzr?

@CorySimmons It just doesn't work when selectivzr isn't loaded. What as soon as I remove the polyfill or selectivzr, everything behaves normal.

Has anyone got a idea what is causing this? Is box-sizing-polyfill or selectivzr causing this issue? Where does it need to be fixed?

[corysimmons]

@luksak Go into selectivizr.js and Ctrl + F "hover" then remove that entire function. It still breaks when the browser window is resized or anything expands/contracts (JS animations like jQuery slideDown, etc.).

I dropped seamless support for IE7 and added a Stylus mixin that removes padding on the sides of elements as a fallback. Doesn't look perfect, but functions for crappy IE7 and saves you the headache of getting boxsizing not to randomly explode.

[luksak]

@CorySimmons Well, this seems to solve this Problem in your case. But what side effect may this be causing? We should look for a clean solution instead of hacking a hacked polyfill with ugly code. This is not the right approach.

Complaining about IE7 is ok, but there seems to be a reason that you use a polyfill to support older browsers ;)

@Schepp Could you make a guess where this issue could be coming from so we can fix it?

[corysimmons]

The "right" approach doesn't exist because IE7 is too old to offer support for it. So the best approach I could find is dropping boxsizing.htc and just manually getting rid of extra padding via star-hack.

Sucks and it's extra work, but it looks good and doesn't explode my entire website. :\

[luksak]

@CorySimmons Well, this polyfill already provides a pretty good fallback. I think it should be doable to fix this issue. At least we should try to ;)

[darrenscerri]

I also encountered this issue and I decided to drop this polyfill and use the following quick jQuery hack:

$.fn.boxSizeIE7 = function() {
    this.each(function() {
        var $this = $(this)
        var elem_width = $this.width()
        $this.width(elem_width - ($this.outerWidth() - elem_width))    
    })
}

Use as follows:

$('.broken_elem').boxSizeIE7()

Luckily there will only be a few elements in the page which significantly break the layout. I suggest you only use this function on elements which really need to be fixed. For example in case of fluid layouts you can use:

$('.row-fluid [class*="span"]').boxSizeIE7()

You should test if the browser supports box sizing by using Modernizr and this test:

Modernizr.addTest("boxsizing", function() {
    return Modernizr.testAllProps("boxSizing") && (document.documentMode === undefined || document.documentMode > 7);
});

[skyshab]

In case anyone else is having a similar issue, I thought I'd share my experience.

I've used this with my sites for awhile, with no issues. I am trying to add Selectivizr into the mix, and came across some strangeness. Using nth-child on my fluid grid sections, and when the page loads in ie7, the sections are not the proper width with any border or padding applied. As soon as the page is resized, however, they snap to their proper dimensions. After being unable to fix the issue through regular CSS, I found an ugly hack that nonetheless does the job. A little jQuery on pageload fixes it right up.

$(document).ready(function(){

$(".ie7").css("padding", "1px");
setTimeout(function() {
        $(".ie7").css("padding", "0");
}, 400);

});

Don't know why, but 400ms is the least delay I can add for it to work. Not pretty, but better than the alternatives.