ただの白羊
9 months ago @Edit 9 months ago
發現 CSS calc 在各 browser 上的一些奇妙行為

於 Firefox 上使用 CSS calc,在輸入都是整數的情況下:
如果純做數值運算,不做單位換算(ex: *1px 之類的)
當給的值 <= 2^23 (8388608) 時會用整數算
但當給的值超過時就會變成浮點數運算(這時輸出還是整數,但只有有效數部分會被回傳,猜中間轉型後精度沒有處理好)
如果有做單位換算,則是輸出 >999999 或 <-999999(1e+6-1)就會用浮點數運算(但精度還是跑掉,像 calc((999999+2)*1px) 回傳是 1000000px)
直到輸出 >999994 或 <-999994 時輸出才會真的是浮點數(不知道怎麼設計的,猜閥值其實是 9999999(1e+7-1)猜中間轉型後精度沒有處理好)
ただの白羊
9 months ago @Edit 9 months ago
在 chrome 上 calc 有做單位換算則是輸出 > 999999 或 < -999999 就會變成浮點數(閥值 1e+6 - 1),輸出也為浮點數。

而純數值運算,chrome 上只要輸出 <= 2147483647 或 >= -2147483648(2^31) 都沒問題,超過輸出會直接卡在閥值身上(看來就是純數值運算給整數就一樣會用整數算)

還有 CSS counter 在 chrome 上無論給予浮點還是整數都會轉型後當作整數處理,但 Firefox 目前起來超過 2^23 (8388608) 是會爛掉的(
ただの白羊
9 months ago @Edit 9 months ago
備註:
1. 不太確定名詞部分怎麼翻譯但為了能塞進去字數限制所以用維基找到的「有效數」,原意是 Significand
2. 為了不要被當斜體*用全形表示
3. 測試數值輸出的部分目前是用 js 透過 getComputedStyle() 去拿
ただの白羊
9 months ago @Edit 9 months ago
Firefox 整數運算案例:calc(8388609 + 2) 輸出是 8388612
立即下載