記一次樣式 debug 詳情 - 前端,debugging,兼容性 Grewer 動態日志

背景

在一個平凡的工作日中，突然有客户説我們產品的彈窗點擊無法顯示，這讓我立刻放下了手裏的活，去看了下線上環境，結果卻是一切正常

這不禁讓我有些奇怪，所以和客户要了截屏，最後發現在客户的電腦上點擊無效，作為一個老開發，第一反應就是兼容性的問題

涉及到公司產品，暫時不能放出對應截圖，不過會用 demo 截圖來代替。

這裏我用 demo 復現的場景：

這是正常的antd modal樣式：

現狀

目前我們的產品是 web 項目， modal 使用的是 antd 的 modal，可以在釘釘中被使用，而且因為註冊了釘釘的應用，所以打開是通過釘釘的瀏覽器，難道是釘釘的兼容性問題？

所以也問了下客户，給到的回覆是：他們使用的是最新版本的釘釘。

但是我們也是相同版本，那差異性，就應該在系統上了，所以問了下系統

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.6.1 Safari/605.1.15 DingTalk(7.6.47-macOS-macOS-MAS-43763219) nw DTWKWebView Channel/201200

新的疑問：難道是系統的原因？ 10.15 是一個較低的版本

但是因為我們這並沒有此係統版本，所以先嚐試盲改一波看看效果

第一次嘗試!

暫定的結論是：動畫導致的加載異常，因為之前產品裏碰到過一次類似的：因為動畫導致的性能卡頓，而去除了全局動畫

根據之前類似經驗，這應該就是動畫的問題了

説幹就幹

我先將 antd modal 的動畫去除：


<Modal
    transitionName=""
    maskTransitionName=""
    // ...其他屬性
>
</Modal>

打算上了線之後看看

結果很遺憾，並沒有生效，看來事情並沒有我想的那麼簡單

遠程查看

這次我們再嘗試遠程下，因為要客户配合，我們要一起挑一個時間。

通過 vconsole 顯示，查看他的 element 功能，可以看到 dom 裏的 antd modal 結構是正常加載的，但是卻一直沒有顯示。

並且我們也在系統的 safari 裏打開了鏈接，結果卻是顯示正常。

所以現在的問題根源可以定位於釘釘的默認瀏覽器兼容有問題

復現

因為要低版本的 mac 我嘗試了虛擬機方案。

在嘗試虛擬機的時候，因為對應低版本 mac 是 intel，而我的系統是 m1 版本，所以裝不上對應的虛擬機，所以最終也是接別人的 intel mac 來裝虛擬機

最終成功在虛擬機上覆現此場景，在能夠復現後，那我們可能通過各類方案進行嘗試了

解決方案

我們從 CSS 開始調整

z-index

z-index 是常見的屬性被遮蓋時的解決方案，所以這裏我優先想到的就是這個屬性，但是結果缺不盡如人意

transform

在一起 iframe 中，我遇到過性能問題，此屬性，就是用來啓動硬件加速，讓 modal 顯示完整的方案之一

現狀的樣式：

這裏我把背景色添加各類不同的顏色，方便做出判斷：

這樣就很明顯了，modal 的實際大小並沒有被撐開，所以是什麼屬性沒有起效呢

解決

這裏嘗試了幾個css屬性的組合，最終還是定位的問題，添加如下css：

.ant-modal-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  min-height: 100%;
}

.ant-modal-wrap {
  position: fixed;
  left: 0;
  right: 0;
  top: 5%;
  min-height: 100%;
}

添加後，modal 的實際大小就被撐開了，點擊也可以正常觸發了