title: Two images with identical physical pixel height are having an offset in height.
body: <p>I have built the following in Singularity 
  <img src="https://i.stack.imgur.com/rAaCK.png" alt="one third two third image raster"></p>
  
  <p>A 1/3 broad image next to a 2/3 broad image and in the next line the other way around. The images are served with picturefill. But my problem is when i narrow the viewport down from the containers max-width towards the breakpoint (750px) where the images switch from a two "column" layout to a one column it differ in height even the source files have the exact same physical height in pixel. They differ sometimes a few pixel, sometimes only one. </p>
  
  <p><img src="https://i.stack.imgur.com/ybJi8.png" alt="differing height"></p>
  
  <p>the reduced setup behind is the following (left out retina markup and 2 breakpoints inbetween): </p>
  
  <pre><code>&lt;section class="pro-main" role="main"&gt;
      &lt;section class="pro-thirds"&gt;
          &lt;article class="pro-samples imgparent"&gt;
              &lt;a class="p-ov-liner" href="#"&gt;
                  &lt;span data-picture data-alt="onethird"&gt;
                      &lt;span data-src="/img/projekte-gpfinestsolution-zweidrittel-659x324.jpg"&gt;&lt;/span&gt;
                      &lt;span data-src="/img/projekte-gpfinestsolution-eindrittel-341x347.jpg" data-media="(min-width: 750px)"&gt;&lt;/span&gt;
                      &lt;noscript&gt;&lt;img src="/img/projekte-gpfinestsolution-zweidrittel-659x324.jpg" alt="img1"&gt;&lt;/noscript&gt;
                  &lt;/span&gt;
                  &lt;div class="bottombox"&gt;&lt;/div&gt;
              &lt;/a&gt;
          &lt;/article&gt;
          &lt;article class="pro-samples imgparent"&gt;
              &lt;a class="p-ov-liner" href="#"&gt;
                  &lt;span data-picture data-alt="twothird"&gt;
                      &lt;span data-src="/img/projekte-gplab-zweidrittel-659x324.jpg"&gt;&lt;/span&gt;
                      &lt;span data-src="/img/projekte-gplab-zweidrittel-704x347.jpg" data-media="(min-width: 750px)"&gt;&lt;/span&gt;
                      &lt;noscript&gt;&lt;img src="/img/projekte-gplab-zweidrittel-659x324.jpg" alt="twothird"&gt;&lt;/noscript&gt;
                  &lt;/span&gt;
                  &lt;div class="bottombox"&gt;&lt;/div&gt;
              &lt;/a&gt;
          &lt;/article&gt;
          &lt;article class="pro-samples imgparent"&gt;
              &lt;a class="p-ov-liner" href="#"&gt;
                  &lt;span data-picture data-alt="twothird"&gt;
                      &lt;span data-src="/img/projekte-gplab-zweidrittel-659x324.jpg"&gt;&lt;/span&gt;
                      &lt;span data-src="/img/projekte-gplab-zweidrittel-704x347.jpg" data-media="(min-width: 750px)"&gt;&lt;/span&gt;
                      &lt;noscript&gt;&lt;img src="/img/projekte-gplab-zweidrittel-659x324.jpg" alt="twothird"&gt;&lt;/noscript&gt;
                  &lt;/span&gt;
                  &lt;div class="bottombox"&gt;&lt;/div&gt;
              &lt;/a&gt;
          &lt;/article&gt;
          &lt;article class="pro-samples imgparent"&gt;
              &lt;a class="p-ov-liner" href="#"&gt;
                  &lt;span data-picture data-alt="onethird"&gt;
                      &lt;span data-src="/img/projekte-gpfinestsolution-zweidrittel-659x324.jpg"&gt;&lt;/span&gt;
                      &lt;span data-src="/img/projekte-gpfinestsolution-eindrittel-341x347.jpg" data-media="(min-width: 750px)"&gt;&lt;/span&gt;
                      &lt;noscript&gt;&lt;img src="/img/projekte-gpfinestsolution-zweidrittel-659x324.jpg" alt="img1"&gt;&lt;/noscript&gt;
                  &lt;/span&gt;
                  &lt;div class="bottombox"&gt;&lt;/div&gt;
              &lt;/a&gt;
          &lt;/article&gt;
      &lt;/section&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>breakpoint and singularity settings are as follows:</p>
  
  <pre><code>// Baseline breaks
  $baseline675: 675px 849px;
  $baseline850: 850px 1074px;
  $baseline1075: 1075px 1199px;
  $baselineMAX: 1200px;
  // Container breaks
  $container600: 600px;
  $container750: 750px;
  $container850: 850px;
  $container990: 990px;
  $container1100: 1100px;
  $container1200: 1200px;
  // Singularity
  $grids: 6;
  $grids: add-grid(9 at 675px);
  $grids: add-grid(12 at 850px);
  $grids: add-grid(15 at 1075px);
  $grids: add-grid(18 at 1200px);
  
  $gutters: 1/3;
  
  $output:'isolation';
  </code></pre>
  
  <p>the styling: </p>
  
  <pre><code>.pro-main,
  .pro-thirds {
      @extend %clearfix;
  }
  
  .pro-samples {
      @include trailer(0.5);
          &amp;:last-child {
              @include trailer(2);
          }
      @include switch-baseline(850px 1074px) {
          &amp;:nth-child(4n+1) {
              @include isolation-span(4, 1, 'right', $gutter:.5);
          }
          &amp;:nth-child(4n+4) {
              @include isolation-span(4, 9, 'right', $gutter:0);
          }
          &amp;:nth-child(4n+2) {
              @include isolation-span(8, 5, 'right', $gutter:0);
          }
          &amp;:nth-child(4n+3) {
              @include isolation-span(8, 1, 'right', $gutter:.5);
          }
          &amp;:last-child {
              @include trailer(2);
          }
      }
      @include breakpoint(1075px 1199px) {
          &amp;:nth-child(4n+1) {
              @include isolation-span(5, 1, 'right', $gutter:.5);
          }
          &amp;:nth-child(4n+4) {
              @include isolation-span(5, 11, 'right', $gutter:0);
          }
          &amp;:nth-child(4n+2) {
              @include isolation-span(10, 6, 'right', $gutter:0);
          }
          &amp;:nth-child(4n+3) {
              @include isolation-span(10, 1, 'right', $gutter:.5);
          }
          &amp;:last-child {
              @include trailer(2);
          }
      }
      @include breakpoint(1200px) {
          &amp;:nth-child(4n+1) {
              @include isolation-span(6, 1, 'right', $gutter:.5);
          }
          &amp;:nth-child(4n+4) {
              @include isolation-span(6, 13, 'right', $gutter:0);
          }
          &amp;:nth-child(4n+2) {
              @include isolation-span(12, 7, 'right', $gutter:0);
          }
          &amp;:nth-child(4n+3) {
              @include isolation-span(12, 1, 'right', $gutter:.5);
          }
          &amp;:last-child {
              @include trailer(2);
          }
      }
  }
  </code></pre>
  
  <p>Between the height of the one third and two third images at max width are physically identical also they are aligned at the bottom line. on smaller viewports they differ. and if i remove the gutter with pictures in it the heights still differs. e.g. </p>
  
  <pre><code>    @include breakpoint(1075px 1199px) {
          &amp;:nth-child(4n+1) {
              @include isolation-span(5, 1, 'right', $gutter:0);
          }
          &amp;:nth-child(4n+4) {
              @include isolation-span(5, 11, 'right', $gutter:0);
          }
          &amp;:nth-child(4n+2) {
              @include isolation-span(10, 6, 'right', $gutter:0);
          }
          &amp;:nth-child(4n+3) {
              @include isolation-span(10, 1, 'right', $gutter:0);
          }
          &amp;:last-child {
              @include trailer(2);
          }
      }
  </code></pre>
  
  <p>If i use, instead of the picturefill markup, just empty article tags and add those two properties to the scss from above the height stays exactly the same on all article elements no matter if they are 1/3 or 2/3. </p>
  
  <pre><code> background:red
   height:10em; 
  </code></pre>
  
  <p>with gutter:</p>
  
  <p><img src="https://i.stack.imgur.com/yWVHi.png" alt="red with gutter"></p>
  
  <p>and without: </p>
  
  <p><img src="https://i.stack.imgur.com/XHGoi.png" alt="red without gutter"></p>
  
  <p>Does anyone have an idea what might cause that varying difference in height over the viewports? Me for myself am completely out of ideas. :( </p>
  
  <p>Best regards Ralf</p>