tabs
tabs copied to clipboard
Tabs scroll slowly in firefox some version such as 72.0
Platform
- OS: windows 11
- browser: firefox 72.0
code
import React, { useState } from 'react';
import type { RadioChangeEvent } from 'antd';
import { Radio, Tabs } from 'antd';
type TabPosition = 'left' | 'right' | 'top' | 'bottom';
const App: React.FC = () => {
const [mode, setMode] = useState<TabPosition>('top');
const handleModeChange = (e: RadioChangeEvent) => {
setMode(e.target.value);
};
return (
<div>
<Radio.Group onChange={handleModeChange} value={mode} style={{ marginBottom: 8 }}>
<Radio.Button value="top">Horizontal</Radio.Button>
<Radio.Button value="left">Vertical</Radio.Button>
</Radio.Group>
<Tabs
defaultActiveKey="1"
tabPosition={mode}
style={{ height: 220 }}
items={new Array(30).fill(null).map((_, i) => {
const id = String(i);
return {
label: `Tab-${id}`,
key: id,
disabled: i === 28,
children: `Content of tab ${id}`,
};
})}
/>
</div>
);
};
the behavior in firefox 72.0
https://user-images.githubusercontent.com/50828665/224318652-2c32a52c-b104-4d53-87ce-d57e522bb924.mp4
the expected behavior
the behavior in firefox 109
https://user-images.githubusercontent.com/50828665/224319025-92ea69e6-ff28-4201-9dd9-1db9a8d01be6.mp4
cause
'wheel' event has a property deltaMode
representing the unit of the delta* values' scroll amount