Search code examples
htmlcsssafarimedia-queries

Media Query not kicking in for Safari

I have table showing on my web page , the width of which exceeds that of the screen. So to make it presentable, I have used to the trick mentioned at csstricks . The CSS is attached here for reference as well:

@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"; }
}

The effect is perfectly visible on chrome as shown in this screenshot.enter image description here

However, on Safari (both desktop and iPhone) the table data is jumbled up.enter image description here

P.S: You can run the following sample query on the website to check:

 { outdoor: 'ac',
   indoor: 'Furnace coil',
   coolingtons: '2',
   furnace: 'New',
   fuel: 'Gas',
   venting: 'Condensing',
   state: 'Massachussetts',
   btuh: '60000',
   electricutility: 'National Grid',
   gasutility: 'Blackstone Gas' }
Solution

  • I check your codes.Please try to change the <!Doctype html5> to <!Doctype html>

    Reference : Chrome-specific CSS issue setting table cell to display:block

    Even not coming the exact output in webkit browser.

    Refer this comments: https://bugs.webkit.org/show_bug.cgi?id=38527

    After analyzing it --> The webkit browsers not over riding the display properties.whatever you change to table,come back to the same properties to display:table-cell.