useBreakpointValue has 1px off per breakpoint

[Lombeira]

Description

When using the hook to conditionally render diferent logos based on screen width something weird happens on especific screen sizes

const ImageWrapper = ({ logoDesktop = desktopLogo, logoMobile = mobileLogo, alt, onClick }: IImageWrapper) => {
  const responsiveSrc = useBreakpointValue({
    base: logoMobile,
    md: logoDesktop,
  }, { ssr: false });

  const responsiveWidth = useBreakpointValue({
    base: '40px',
    md: '112px',
  }, { ssr: false });

  return (
    <Image
      cursor='pointer'
      src={responsiveSrc}
      alt={alt}
      width={responsiveWidth}
      onClick={onClick}
      marginRight={{ base: '0.5rem', md: '1rem' }} />
  );
};

Reproducing in the codesandbox sent below

Link to Reproduction

https://codesandbox.io/s/reverent-morning-fv2yjp?file=/src/index.js

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

Chakra UI Version

2.2.1

Browser

Google Chrome

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[bertho-zero]

I have the same issue

[segunadebayo]

This issue has been automatically closed due to inactivity. If you believe this closure was in error, please reopen the issue or add a comment. Thanks for your understanding.

Note: This is an automated message.