當選項卡隱藏時，OSX Safari transitionEnd不會被觸發

Question

我在OSX Safari中在同一個窗口中打開了兩個選項卡。 我在第一個選項卡上有一個自定義的CSS3轉換，我訂閱了它的onTransitionEnd事件。 它在正常情況下工作正常，但是當我重新加載頁面並立即在第二個選項卡上切換時（第二個選項卡上的內容無關緊要），onTransitionEnd事件未在第一個選項卡上觸發。

要重現此問題：

1. 在Safari選項卡中打開此jsFiddle： http ： //jsfiddle.net/qzweoL6r/4/
2. 等待警報，它應該告訴你過渡“結束”
3. 打開另一個選項卡，例如http://stackoverflow.com
4. 導航回第一個選項卡（jsfiddle）並點擊RUN並立即切換到第二個選項卡
5. 等待4秒，正常情況下應該彈出警報，但沒有
6. 切換回第一個標簽（jsfiddle），如果你沒有在＃4中看到警報，現在你應該看到它，但是沒有再看，只是div的寬度變為400px過渡值。

 setTimeout(function() { $('div').one('webkitTransitionEnd transitionend', function() { alert('ended'); }) .addClass('active'); }, 2000); 

 div { width: 200px; height: 200px; background: #f00; transition: all 2s linear; } div.active { width: 400px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <div></div> 

您是否知道如何使用JavaScript修復此瀏覽器問題？

Answer 1

我也在Chrome中看到了這個問題，並且它已被記錄為Firefox的錯誤 。 React JS和Bootstrap已經開發了涉及超時的JS解決方法，我認為在此期間需要完成的工作才能解決這個問題。

以下是此問題的轉發和解決方法的示例： https ： //github.com/Khan/react-components/blob/master/js/timeout-transition-group.jsx