1

I'm making a fully-flex, percentage based layout.

It has a Nav bar on the left hand side which switches from full mode to a small mode - in order to achieve this (as the nav is absolute positioned) I'm adding padding on the wrapping div for the main content, as a way of resizing the inner content.

I've added a quick jQuery function to do this, but when I click it in Chrome, the main content breaks out of it's container - the container doesn't resize back to 100% width.

This only seems to be happening in Chrome - does any one know why, or what I can do to counter it?

The site can be found here: http://dev.barringtonmedia.co.uk/test/layout.html

The problem can be seen in the following images: Chrome - incorrect behaviour - the white bordered box has broken out of the red box

Firefox - correct behaviour, no breakout has occurred.

Created a jsfiddle with it, if you fancy a play: http://jsfiddle.net/Dycd4/

Richard
  • 1,148
  • 3
  • 18
  • 33
  • Actually the requirement is not clear, can you please clarify the exact requirement? – Subhajit Jun 18 '12 at 10:24
  • The current behaviour in chrome is wrong, When you click the Toggle Layout button, the main layout (surrounded in a white border) breaks out of it's parent div (red background). This shouldn't happen and doesn't in any other (non-webkit) browser. I need to know why this happens, or how to stop it!!! Cheers! – Richard Jun 18 '12 at 10:35
  • Markup or css please? I think its an issue of that element not getting resized than padding. – Playmaker Jun 18 '12 at 10:47
  • 1
    Weird thing - in Chrome's inspector if you click an element (any element), the layout corrects itself. – Jonathan Nicol Jun 18 '12 at 10:49
  • Yeah, or slightly resize the window, I was desperately looking for a jquery "refresh layout" function. Doesn't seem to exist! I made a fiddle of it: http://jsfiddle.net/Dycd4/ – Richard Jun 18 '12 at 10:51
  • If you click "toggle layout", force it to update with a slight resize, then click "toggle layout" again it doesn't resize back to the original. It's a webkit rendering thing, anyone tested it with safari? – Delusional Logic Jun 18 '12 at 10:56
  • Yeah, same issue in Safari. Interestingly, like you said, toggle layout changes it ONCE, however if you highlight the div with the inspector it "remembers" what size it should be and corrects itself. Gah! – Richard Jun 18 '12 at 11:01

2 Answers2

2

I've seen this problem several times now.

The fix from my answer here works: jQuery CSS rendering - works in Firefox, not in Chrome

Here it is applied to your code: http://jsfiddle.net/thirtydot/Dycd4/1/

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
0

not a real answer about the reason behind that rendering issue, but rather a suggestion: you could actually use css media queries instead of jQuery to control the css at different widths.

W3C links for the purists: http://www.w3.org/TR/css3-mediaqueries/

hands-on guide on MDN: https://developer.mozilla.org/en/CSS/Media_queries

Luca
  • 9,259
  • 5
  • 46
  • 59