srcSet attribute is not working on safari

109 views Asked by At

I have a navigation bar and there are several images for navigation. There are 4 of them for any one of them for scaling based on viewports. It's as follows:

icons.ts

import dashboardIcon from 'assets/icons/dashboard_icon.png'
import dashboardIcon2x from 'assets/icons/[email protected]'
import dashboardIcon3x from 'assets/icons/[email protected]'
import dashboardIcon4x from 'assets/icons/[email protected]'

dashboardIcon: {
    src: dashboardIcon,
    srcset: `${dashboardIcon4x} 4x,${dashboardIcon3x} 3x,${dashboardIcon2x} 2x, ${dashboardIcon} 1x`,
  },

CustomIcon.tsx

import React from 'react'
import styled from 'styled-components'

import { FixMeLater } from 'types'

import FilePicker from 'components/button/FilePicker'

export interface IconSourceType {
  src: string
  srcset: string
}
interface IIconProps {
  id?: string
  source: IconSourceType
  className?: string
  isFilePicker?: boolean
  getInputProps?: FixMeLater
  onClick?: (e: React.MouseEvent<HTMLElement>) => void
  onMouseDown?: (e: React.MouseEvent<HTMLElement>) => void
  onMouseUp?: (e: React.MouseEvent<HTMLElement>) => void
}

const CustomIcon = ({
  id = '',
  source,
  className,
  isFilePicker,
  getInputProps,
  onClick,
  onMouseDown,
  onMouseUp,
}: IIconProps) => {
  return (
    <>
      <IconWrapper
        id={id}
        onClick={onClick}
        onMouseDown={onMouseDown}
        onMouseUp={onMouseUp}
        className={className}
        src={source.src}
        srcSet={source.srcset}
        clickable={!!onClick || !!onMouseUp}
      />
      {isFilePicker && <FilePicker getInputProps={getInputProps} icon />}
    </>
  )
}

export default CustomIcon

const IconWrapper = styled.img`
  cursor: ${({ clickable }: { clickable: boolean }) => (clickable ? 'pointer' : 'unset')};
`

usage in NavigationBar.tsx:

...
<CustomIcon source={icons.dashboardIcon} />
...

But this doesn't seem to work for safari even though it's working properly on any browser except safari. Any help is appreciated, thanks in advance.

0

There are 0 answers