Home > other >  CSS Transitions in Safari
CSS Transitions in Safari

Time：01-18

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 >
      <td colspan="4" onclick="toggleSpecCat(this, 'CatBattery')">
         <span>Battery</span>
      </td>
   </tr>
   <tbody >
      <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 >
      <td colspan="4" onclick="toggleSpecCat(this, 'CatHeadphone')">
         <span>Headphone</span>
      </td>
   </tr>
   <tbody >
      <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>Magnet 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 >
      <td colspan="4" onclick="toggleSpecCat(this, 'CatMicrophone')">
         <span>Microphone</span>
      </td>
   </tr>
   <tbody >
      <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 >
      <td colspan="4" onclick="toggleSpecCat(this, 'CatPerformance')">
         <span>Performance</span>
      </td>
   </tr>
   <tbody >
      <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>

CodePudding user response：

I confirm what you’re seeing, and my answer is that this is Apple’s bug to resolve. Report it.

CodePudding user response：

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 >
         <td colspan="4" onclick="toggleSpecCat(this, 'CatBattery')">
            <span>Battery</span>
         </td>
      </tr>
   </tbody>
   <tbody >
      <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 >
         <td colspan="4" onclick="toggleSpecCat(this, 'CatHeadphone')">
            <span>Headphone</span>
         </td>
      </tr>
   </tbody>
   <tbody >
      <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>Magnet 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 >
         <td colspan="4" onclick="toggleSpecCat(this, 'CatMicrophone')">
            <span>Microphone</span>
         </td>
      </tr>
   </tbody>
   <tbody >
      <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 >
         <td colspan="4" onclick="toggleSpecCat(this, 'CatPerformance')">
            <span>Performance</span>
         </td>
      </tr>
   </tbody>
   <tbody >
      <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>

Page link：https//www.codepudding.com/other/675743.html

Prev:Adding Width property moving content to the left
Next:Why is my background image blocking and restricting use of my navbar?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding