Slider Tooltip causing overflow on Safari

[petewins]

Describe the bug While this is a similar problem to #239, this issue is specific to Safari browsers and the tooltip. On load of Slider on Safari, the component creates a horizontal overflow. This impacts other component's UX whenever the Slider is used and overflows.

To Reproduce

1. create a slider that will render a tooltip with more 6 characters.
2. open in Safari and try to horizontal scroll
3. after hovering the Slider knob, the problem will correct it self and does not overflow anymore.

CodeSandox: https://codesandbox.io/p/sandbox/radash-sandbox-n5t53v?file=%2Fsrc%2FApp.tsx%3A20%2C11

  const renderLongTooltip = ({ value }: { value: number }) => {
    return `$123,456000`;
  };

  return (
    <Reshaped theme="reshaped">
      <View height="50vh" justify="center" borderColor="brand" padding={4}>
        <Slider
          renderValue={renderLongTooltip}
          name="slide"
          min={0}
          max={100}
          defaultValue={100}
        />
        <Text variant="body-1">
          On Safari, refresh page and try horizontally scrolling this component.
          Something is causing a overflow onload. After hovering the Slider
          knob, the overflow problem goes away.
        </Text>
      </View>
    </Reshaped>

Expected behavior I expect this component to not overflow and stay inside the box on load or in any state.

Environment (please complete the following information):

• OS: iOS and MacOS
• Browser: Safari
• Reshaped version: 2.10.19

Additional context Example: Safari:

https://github.com/formaat-design/reshaped/assets/19542805/8fd6f8c7-e962-4026-89e0-55a96b3d7ab8

Chrome and Firefox working as expected

[blvdmitry]

Hey, thanks for the heads-up. We'll check this for the next release. I'm trying to get codesandbox to open the example. While i'm struggling, can you also tell me what happens for you when you hover over the thumb? We currently already handle the tooltip staying inside the slider boundaries when sliding so wondering if that's not happening for you too

[petewins]

@blvdmitry i updated the codesandbox link, on hover it corrects itself but on load there is a overflow for Safari

[blvdmitry]

Still trying to reproduce it locally but no luck so far even though I can also see this happening in Codesandbox even after some fixes I've added in 2.11.5

[blvdmitry]

Seems to be finally working fine in 2.11.6 ✨ https://codesandbox.io/p/sandbox/radash-sandbox-forked-sqsjkz?file=%2Fsrc%2FApp.tsx%3A12%2C13