CSS Transitions in Safari

Question

I have an HTML table with collapsible/expandable sections. The CSS transition animates smoothly in every single browser except Safari. The collapse animation is super jerky on Safari, but the expand animation is okay. I'm running the latest: Safari 16.2 on macOS 13.1.

Any advice on how to resolve this would be fantastic. Thanks.

 function toggleSpecCat(el, cls) { el.closest('tr').classList.toggle('Closed'); document.querySelector(`.${cls}`).classList.toggle('Closed'); }

 * { font-family: sans-serif; padding: 0; margin: 0; } #Products { margin: 0 auto; border-spacing: 0; } #Products th, #Products td { border-right: 1px solid black; border-bottom: 1px solid black; background-color: white; width: calc((100% - 180px) / 3); min-width: 200px; padding: 9px; } #Products th:first-child, #Products td:first-child { width: 180px; } #Products th { background-color: #555; color: white; } #Products th:first-child { text-align: left; } #Products th:last-child, #Products td:last-child { border-right: none; } #Products.SpecCatHeader * { background-color: black; font-weight: bold; color: white; cursor: pointer; -webkit-user-select: none; user-select: none; } #Products.SpecCat th, #Products.SpecCat td { transition: line-height 0.3s, padding-top 0.3s, padding-bottom 0.3s; } #Products.SpecCat.Closed th, #Products.SpecCat.Closed td { opacity: 0; line-height: 0; padding-top: 0; padding-bottom: 0; border: none; }

 <table id="Products"> <thead> <tr> <th>PRODUCTS</th> <th>Product 1</th> <th>Product 2</th> <th>Product 3</th> </tr> </thead> <tr class="SpecCatHeader"> <td colspan="4" onclick="toggleSpecCat(this, 'CatBattery')"> <span>Battery</span> </td> </tr> <tbody class="SpecCat CatBattery"> <tr> <th>Charging Cable Length</th> <td>7.87&quot; / 19.99 cm</td> <td>7.87&quot; / 19.99 cm</td> <td>7.87&quot; / 19.99 cm</td> </tr> <tr> <th>Charging Port</th> <td>USB Type-C</td> <td>USB Type-C</td> <td>USB Type-C</td> </tr> <tr> <th>DC Input Power</th> <td>5 VDC</td> <td>5 VDC</td> <td>5 VDC</td> </tr> <tr> <th>Quick Charging Times</th> <td>10 Minutes for 5 Hours</td> <td>10 Minutes for 5 Hours</td> <td>10 Minutes for 5 Hours</td> </tr> <tr> <th>Recharge Time</th> <td>3 Hours</td> <td>3 Hours</td> <td>3 Hours</td> </tr> <tr> <th>Runtime</th> <td>30 Hours (BT+ANC) 38 Hours (BT) 200 Hours (Standby)</td> <td>30 Hours (BT+ANC) 38 Hours (BT) 200 Hours (Standby)</td> <td>30 Hours (BT+ANC) 38 Hours (BT) 200 Hours (Standby)</td> </tr> <tr> <th>Wireless Charging</th> <td>None</td> <td>None</td> <td>None</td> </tr> </tbody> <tr class="SpecCatHeader"> <td colspan="4" onclick="toggleSpecCat(this, 'CatHeadphone')"> <span>Headphone</span> </td> </tr> <tbody class="SpecCat CatHeadphone"> <tr> <th>Active Noise Cancellation</th> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <th>Controls/Microphone Location</th> <td>Controls: Earpiece (Side Unspecified) Microphone: Earpiece (Side Unspecified)</td> <td>Controls: Earpiece (Side Unspecified) Microphone: Earpiece (Side Unspecified)</td> <td>Controls: Earpiece (Side Unspecified) Microphone: Earpiece (Side Unspecified)</td> </tr> <tr> <th>Diaphragm</th> <td>Aluminum-Coated</td> <td>Aluminum-Coated</td> <td>Aluminum-Coated</td> </tr> <tr> <th>Driver Size</th> <td>1.57&quot; / 40 mm</td> <td>1.57&quot; / 40 mm</td> <td>1.57&quot; / 40 mm</td> </tr> <tr> <th>Driver Type</th> <td>Dynamic</td> <td>Dynamic</td> <td>Dynamic</td> </tr> <tr> <th>Earpiece Connection / Wearing Style</th> <td>Headband</td> <td>Headband</td> <td>Headband</td> </tr> <tr> <th>Earpiece Design</th> <td>Over-Ear (Circumaural), Closed-Back</td> <td>Over-Ear (Circumaural), Closed-Back</td> <td>Over-Ear (Circumaural), Closed-Back</td> </tr> <tr> <th>Earpiece Swivel</th> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <th>Foldable</th> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <th>Full Remote OS Support</th> <td>Android, iOS</td> <td>Android, iOS</td> <td>Android, iOS</td> </tr> <tr> <th>Ma.net Type</th> <td>Neodymium</td> <td>Neodymium</td> <td>Neodymium</td> </tr> <tr> <th>Number of Drivers</th> <td>1, per Earpiece</td> <td>1, per Earpiece</td> <td>1, per Earpiece</td> </tr> <tr> <th>Sensors</th> <td>Proximity, Touch</td> <td>Proximity, Touch</td> <td>Proximity, Touch</td> </tr> <tr> <th>Voice Coil</th> <td>Copper-Clad Aluminum Wire</td> <td>Copper-Clad Aluminum Wire</td> <td>Copper-Clad Aluminum Wire</td> </tr> </tbody> <tr class="SpecCatHeader"> <td colspan="4" onclick="toggleSpecCat(this, 'CatMicrophone')"> <span>Microphone</span> </td> </tr> <tbody class="SpecCat CatMicrophone"> <tr> <th>Beamforming Support</th> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <th>Noise Canceling</th> <td>Not Specified by Manufacturer</td> <td>Not Specified by Manufacturer</td> <td>Not Specified by Manufacturer</td> </tr> <tr> <th>Number of Mics</th> <td>5</td> <td>5</td> <td>5</td> </tr> <tr> <th>Type</th> <td>MEMS</td> <td>MEMS</td> <td>MEMS</td> </tr> </tbody> <tr class="SpecCatHeader"> <td colspan="4" onclick="toggleSpecCat(this, 'CatPerformance')"> <span>Performance</span> </td> </tr> <tbody class="SpecCat CatPerformance"> <tr> <th>Frequency Response</th> <td>4 Hz to 40 kHz (Wired)</td> <td>4 Hz to 40 kHz (Wired)</td> <td>4 Hz to 40 kHz (Wired)</td> </tr> <tr> <th>Sensitivity</th> <td>101 dB at 1 kHz (Passive) 105 dB at 1 kHz (Active)</td> <td>101 dB at 1 kHz (Passive) 105 dB at 1 kHz (Active)</td> <td>101 dB at 1 kHz (Passive) 105 dB at 1 kHz (Active)</td> </tr> <tr> <th>Storage Capacity</th> <td>None</td> <td>None</td> <td>None</td> </tr> </tbody> </table>

Answer 1

I fixed it by removing line-height from my transition.

 function toggleSpecCat(el, cls) { el.closest('tr').classList.toggle('Closed'); document.querySelector(`.${cls}`).classList.toggle('Closed'); }

 * { font-family: sans-serif; padding: 0; margin: 0; } main { width: 100%; padding: 0; } #Products { margin: 0 auto; border-spacing: 0; } #Products th, #Products td { border-right: 1px solid black; border-bottom: 1px solid black; background-color: white; width: calc((100% - 180px) / 3); min-width: 200px; padding: 9px; } #Products th:first-child { width: 180px; } #Products th { background-color: #555; color: white; } #Products th:first-child { text-align: left; } #Products th:last-child, #Products td:last-child { border-right: none; } #Products.SpecCatHeader * { background-color: black; font-weight: bold; color: white; cursor: pointer; -webkit-user-select: none; user-select: none; } #Products.SpecCat th, #Products.SpecCat td { transition: padding-top 0.3s, padding-bottom 0.3s; } #Products.SpecCat.Closed th, #Products.SpecCat.Closed td { opacity: 0; line-height: 0; padding-top: 0; padding-bottom: 0; border: none; }

 <table id="Products"> <thead> <tr> <th>PRODUCTS</th> <th>Product 1</th> <th>Product 2</th> <th>Product 3</th> </tr> </thead> <tbody> <tr class="SpecCatHeader"> <td colspan="4" onclick="toggleSpecCat(this, 'CatBattery')"> <span>Battery</span> </td> </tr> </tbody> <tbody class="SpecCat CatBattery"> <tr> <th>Charging Cable Length</th> <td>7.87&quot; / 19.99 cm</td> <td>7.87&quot; / 19.99 cm</td> <td>7.87&quot; / 19.99 cm</td> </tr> <tr> <th>Charging Port</th> <td>USB Type-C</td> <td>USB Type-C</td> <td>USB Type-C</td> </tr> <tr> <th>DC Input Power</th> <td>5 VDC</td> <td>5 VDC</td> <td>5 VDC</td> </tr> <tr> <th>Quick Charging Times</th> <td>10 Minutes for 5 Hours</td> <td>10 Minutes for 5 Hours</td> <td>10 Minutes for 5 Hours</td> </tr> <tr> <th>Recharge Time</th> <td>3 Hours</td> <td>3 Hours</td> <td>3 Hours</td> </tr> <tr> <th>Runtime</th> <td>30 Hours (BT+ANC) 38 Hours (BT) 200 Hours (Standby)</td> <td>30 Hours (BT+ANC) 38 Hours (BT) 200 Hours (Standby)</td> <td>30 Hours (BT+ANC) 38 Hours (BT) 200 Hours (Standby)</td> </tr> <tr> <th>Wireless Charging</th> <td>None</td> <td>None</td> <td>None</td> </tr> </tbody> <tbody> <tr class="SpecCatHeader"> <td colspan="4" onclick="toggleSpecCat(this, 'CatHeadphone')"> <span>Headphone</span> </td> </tr> </tbody> <tbody class="SpecCat CatHeadphone"> <tr> <th>Active Noise Cancellation</th> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <th>Controls/Microphone Location</th> <td>Controls: Earpiece (Side Unspecified) Microphone: Earpiece (Side Unspecified)</td> <td>Controls: Earpiece (Side Unspecified) Microphone: Earpiece (Side Unspecified)</td> <td>Controls: Earpiece (Side Unspecified) Microphone: Earpiece (Side Unspecified)</td> </tr> <tr> <th>Diaphragm</th> <td>Aluminum-Coated</td> <td>Aluminum-Coated</td> <td>Aluminum-Coated</td> </tr> <tr> <th>Driver Size</th> <td>1.57&quot; / 40 mm</td> <td>1.57&quot; / 40 mm</td> <td>1.57&quot; / 40 mm</td> </tr> <tr> <th>Driver Type</th> <td>Dynamic</td> <td>Dynamic</td> <td>Dynamic</td> </tr> <tr> <th>Earpiece Connection / Wearing Style</th> <td>Headband</td> <td>Headband</td> <td>Headband</td> </tr> <tr> <th>Earpiece Design</th> <td>Over-Ear (Circumaural), Closed-Back</td> <td>Over-Ear (Circumaural), Closed-Back</td> <td>Over-Ear (Circumaural), Closed-Back</td> </tr> <tr> <th>Earpiece Swivel</th> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <th>Foldable</th> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <th>Full Remote OS Support</th> <td>Android, iOS</td> <td>Android, iOS</td> <td>Android, iOS</td> </tr> <tr> <th>Ma.net Type</th> <td>Neodymium</td> <td>Neodymium</td> <td>Neodymium</td> </tr> <tr> <th>Number of Drivers</th> <td>1, per Earpiece</td> <td>1, per Earpiece</td> <td>1, per Earpiece</td> </tr> <tr> <th>Sensors</th> <td>Proximity, Touch</td> <td>Proximity, Touch</td> <td>Proximity, Touch</td> </tr> <tr> <th>Voice Coil</th> <td>Copper-Clad Aluminum Wire</td> <td>Copper-Clad Aluminum Wire</td> <td>Copper-Clad Aluminum Wire</td> </tr> </tbody> <tbody> <tr class="SpecCatHeader"> <td colspan="4" onclick="toggleSpecCat(this, 'CatMicrophone')"> <span>Microphone</span> </td> </tr> </tbody> <tbody class="SpecCat CatMicrophone"> <tr> <th>Beamforming Support</th> <td>No</td> <td>No</td> <td>No</td> </tr> <tr> <th>Noise Canceling</th> <td>Not Specified by Manufacturer</td> <td>Not Specified by Manufacturer</td> <td>Not Specified by Manufacturer</td> </tr> <tr> <th>Number of Mics</th> <td>5</td> <td>5</td> <td>5</td> </tr> <tr> <th>Type</th> <td>MEMS</td> <td>MEMS</td> <td>MEMS</td> </tr> </tbody> <tbody> <tr class="SpecCatHeader"> <td colspan="4" onclick="toggleSpecCat(this, 'CatPerformance')"> <span>Performance</span> </td> </tr> </tbody> <tbody class="SpecCat CatPerformance"> <tr> <th>Frequency Response</th> <td>4 Hz to 40 kHz (Wired)</td> <td>4 Hz to 40 kHz (Wired)</td> <td>4 Hz to 40 kHz (Wired)</td> </tr> <tr> <th>Sensitivity</th> <td>101 dB at 1 kHz (Passive) 105 dB at 1 kHz (Active)</td> <td>101 dB at 1 kHz (Passive) 105 dB at 1 kHz (Active)</td> <td>101 dB at 1 kHz (Passive) 105 dB at 1 kHz (Active)</td> </tr> <tr> <th>Storage Capacity</th> <td>None</td> <td>None</td> <td>None</td> </tr> </tbody> </table>