title: Media Query not kicking in for Safari
body: <p>I have table showing on my <a href="http://homans.hitcalculate.com/calc" rel="nofollow noreferrer">web page</a> , the width of which exceeds that of the screen. So to make it presentable, I have used to the trick mentioned at <a href="https://css-tricks.com/responsive-data-tables/" rel="nofollow noreferrer">csstricks</a> . The CSS is attached here for reference as well:</p>
  
  <pre><code>@media only screen and (max-width: 800px)  {
  * Force table to not be like tables anymore */
  table, thead, tbody, th, td, tr {
      display: block;
  }
  
  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
  }
  
  tr { border: 1px solid #ccc; }
  
  td {
      /* Behave  like a "row" */
      border: none;
      border-bottom: 1px solid #eee;
      position: relative;
      padding-left: 50%;
  }
  
  td:before {
  
      float: left;
      top: 6px;
      left: 6px;
      width: 45%;
      padding-right: 10px;
      white-space: nowrap;
  }
  
  /*
  Label the data
  */
  td:nth-of-type(1):before { content: "A/C Model"; }
  td:nth-of-type(2):before { content: "Coil Model"; }
  td:nth-of-type(3):before { content: "Furnace/FanCoil"; }
  td:nth-of-type(4):before { content: "AHRI"; }
  td:nth-of-type(5):before { content: "SEER"; }
  td:nth-of-type(6):before { content: "EER"; }
  td:nth-of-type(7):before { content: "AFUE"; }
  td:nth-of-type(8):before { content: "HSPF"; }
  td:nth-of-type(9):before { content: "Bryant Bonus"; }
  td:nth-of-type(10):before { content: "Elec Rebate"; }
  td:nth-of-type(11):before { content: "Furnace Rebate"; }
  td:nth-of-type(12):before { content: "Federal Rebate"; }
  td:nth-of-type(13):before { content: "Total Rebate"; }
  }
  </code></pre>
  
  <p>The effect is perfectly visible on chrome as shown in this screenshot.<a href="https://i.stack.imgur.com/8rcbw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8rcbw.png" alt="enter image description here"></a> </p>
  
  <p>However, on Safari (both desktop and iPhone) the table data is jumbled up.<a href="https://i.stack.imgur.com/r9WAW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r9WAW.png" alt="enter image description here"></a></p>
  
  <p>P.S: You can run the following sample query on the website to check:</p>
  
  <pre><code> { outdoor: 'ac',
     indoor: 'Furnace coil',
     coolingtons: '2',
     furnace: 'New',
     fuel: 'Gas',
     venting: 'Condensing',
     state: 'Massachussetts',
     btuh: '60000',
     electricutility: 'National Grid',
     gasutility: 'Blackstone Gas' }
  </code></pre>