title: This layout works in Chrome, FF, IE10... but not Edge?
body: <p>For the past few days I have been banging my head against a truly bizarre layout bug. It only manifests on Edge on Windows; if I tell the web browser to run in IE10 mode, everything is fine. Every other web browser I've tried behaves perfectly normally. It's just Edge. (The screenshots below were taken on the Microsoft Win7 VM image, explicitly for testing on IE11 with, but real humans have verified this.)</p>
  
  <p>Unfortunately, my program is this huge, complex Polymer thing full of Javascript, so producing a minimum example is really hard. That's my next step, but right now I'm hoping someone will recognise what's going on.</p>
  
  <p>What I've got is a column of text, inside a Polymer container providing style, inside a scrollable. The Polymer container has a white background. What I'm seeing is that the container's size, on Edge, is always smaller than the text. See these screenshots; Chrome on the left (correct), Edge on the right (incorrect). Sorry for the lousy images, but these should demonstrate the issue.</p>
  
  <p><a href="https://i.stack.imgur.com/Uab1N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Uab1N.png" alt="Bottom of the text, in Chrome"></a>
  <a href="https://i.stack.imgur.com/9LwEi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9LwEi.png" alt="Bottom of the text, in Edge"></a></p>
  
  <p>The pink box is a block of padding which I added at the bottom to make the issue more visible.</p>
  
  <p>What's even <em>weirder</em> is that on Edge, the height of the white area --- that is, the size of the container inside the scrollable --- appears to be the same as the viewport size. That is, as if it were <code>height: 100%</code> (which it's not). In fact, investigations show it's more like <code>max-height: 100%</code>, but setting an explicit max-height to a value larger than that seems to do nothing. Something wrong with the way scrollable areas are handled, maybe?</p>
  
  <p>I am completely baffled.</p>
  
  <p><s>If you want to play with it yourself (please do!), follow this link(<a href="https://cowlark.com/gruntle/?id=0ByWQADzU1i2wSUpsbzFOLUlYRUk" rel="nofollow noreferrer">https://cowlark.com/gruntle/?id=0ByWQADzU1i2wSUpsbzFOLUlYRUk</a>; I'll keep it up for a few days. The scrollable element is at <code>BODY &gt; ts-application &gt; iron-pages &gt; #game</code>. The white box is the <code>.gameContainer</code> element inside. You'll need to make the viewport small enough that the content starts scrolling to make the weird behaviour show up.</s> <b>Update:</b> the link's no longer valid.</p>
  
  <p>If nobody has any ideas, I'll start painfully ripping all the dynamic content out of my app in order to produce a smaller example, but... does anybody have any ideas?</p>
  
  <p><b>Update:</b></p>
  
  <p>So it seems that this only manifest on IE11 in Edge mode on Win7. It does <i>not</i> manifest on Edge on Win10.</p>
  
  <p>I'm reasonably sure, therefore, that's it's a plain layout bug on Win7 Edge and that I don't care about making it work. Given that it works on IE11 in non-Edge mode, I might look into forcing the page to work in IE10 mode, but I suspect it's not worth it.</p>