Jump to content


Photo

CSS bug with 1600px width


  • Please log in to reply
1 reply to this topic

#1 chrisedwards

chrisedwards

    Advanced Member

  • Members
  • PipPipPip
  • 241 posts
  • LocationCanada

Posted 04 February 2013 - 08:05 PM

My screen is 1600px width, which corresponds to the max-width for the AppContainer class.

As a result, for pages without scrolling, I lose the margins on the side of the AppContainer in both Firefox and Chrome (IE untested). See attached screenshots (Firefox: firefox example.png , chrome: chrome example-1.png ). When I interact with some elements of the page, it enforces the margin as shown here when I interact with the create button: chrome example-2.png . This causes the page to jump between having margins and not having margins, which can move the element I'm interacting with to be not in focus, which results in losing the margins again, which creates a loop of the page jumping between margins and not unless I move the mouse.

It seems that in this example, the create button is causing room for a vertical scroll bar to be added to the page, which causes the width available to decrease and the margins to be added again.

There is a workaround here to add an overflow-y: scroll to the body tag to enforce scroll bars to always be shown, which appears to be fixing the problem. I'm not sure why the 3% margins on left/right on AppContainer are not being enforced at 1600px width. That would be interesting to find out.

Any ideas?

#2 Amit

Amit

    Member

  • Administrators
  • 12 posts

Posted 05 February 2013 - 04:19 PM

Hi Chris,

 

This is already fixed in our default branch and you'll probably get it with next release.

 

The long story: we targeted 1600px which is exactly what your screen size is, since there's no easy ">=" (gte) in media queries you just fell in between both declarations.






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users