title: Cypress is reporting the wrong size on element
body: <p>I'm using cypress to test our pattern library elements. The alert pattern the <code>&lt;p&gt;</code> set to <code>font-size: 14px</code>. When I inspect the CSS and the dev inspector, I see the correct size being rendered. </p>
  
  <p>But cypress is reporting <code>16.8px</code>. To double check, I asked cypress to log how high the <code>.alert</code> element is. The <code>cy.log</code> reports a height of 34px which is correct. The inspector reports a height of 60px. What is going on here? </p>
  
  <p><a href="https://i.stack.imgur.com/5qZsB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5qZsB.png" alt="enter image description here"></a></p>
  
  <p>```</p>
  
  <pre><code>/// &lt;reference types="Cypress" /&gt;
  
  context('AlertButtonClose', () =&gt; {
      it('Button close displays as designed', () =&gt; {
          cy.visit('?p=molecules-alerts')
  
          cy.get('#sg-viewport').then(function ($iframe) {
              const $jbody = $iframe.contents().find('body')
  
              // Alert Type - All
              const $alertAll = $jbody.find('.alert')
              cy.screenshot()
  
              cy.log('.alert height: ' + $alertAll.height())
              cy.wrap($alertAll)
                  .should('exist', 'be.visible')
                  .should('have.css', 'min-height').and('gte', '3.125rem')
              cy.wrap($alertAll).find('p')
                  .should('exist', 'be.visible')
                  .should('have.css', 'font-size', '14px')
              cy.viewport(639, 720)
              cy.wrap($alertAll).find('.alert-link')
                  .should('not.be.visible')
              cy.viewport(960, 720)
              cy.wrap($alertAll).find('.alert-link')
                  .should('exist', 'be.visible')
                  .should('have.css', 'font-weight', '300', 'text-transform', 'uppercase', 'font-size').should('gte', '10.5px')
  
              if ($alertAll) {
                  expect($alertAll)
                      .to.have.css('color', 'rgb(255, 255, 255)')
              }
  
              // Alert Type - Info
              const $alertInfo = $jbody.find('.alert-info')
  
              if ($alertInfo) {
                  expect($alertInfo)
                      .to.have.css('background-color', 'rgb(3, 155, 229)')
              }
  
              // Alerts Type - Dismissable
              const $alertDismissable = $jbody.find('.alert-dismissable')
  
              if ($alertDismissable) {
                  cy.wrap($jbody).find('.close').should('exist', 'be.visible')
                  cy.wrap($jbody).find('.close img')
                      .should('have.css', 'height', '15px')
                      .should('have.css', 'width', '15px')
                      .should('have.attr', 'alt').should('not.be.empty')
                  cy.wrap($jbody).find('.close img')
                      .should('have.attr', 'src').should('include', 'close-alert.svg')
  
                  cy.wrap($jbody).find('.close').click()
                  cy.wrap($jbody).find('.alert-dismissable').should('not.exist')
              }
          })
      })
  })
  </code></pre>
  
  <p>```</p>
  
  <p>Additionally, the image generated by `cy.screenshot() is crazy over-sized! The alert bar appears to be over 80px in height which utter nonsense.</p>
  
  <p><a href="https://i.stack.imgur.com/xdRSN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xdRSN.png" alt="enter image description here"></a></p>