[TreeView] Icons getting bigger in production environment in safari

[sayinmehmet47]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

1. I am using mui tree component to create folder structure.
2. It is working fine in other then safari browser perfectly in all environments

Current behavior 😯

The icons size and the child folders left padding is not correct in safari Version 15.6.1. But it works well in all other browsers and last safari version.

Expected behavior 🤔

The icons size and left padding of the child folders should shown like in the picture

Context 🔦

seems "css-yuu8jj" missing in styles in safari

see in chrome it does not

want to share some of my code

import cn from 'classnames';
import { forwardRef, type Ref } from 'react';
import { useTreeItem, TreeItemContentProps } from '@mui/lab/TreeItem';

export const TreeViewCustomComponent = forwardRef(function CustomContent(
  props: TreeItemContentProps,
  ref
) {
  const {
    classes,
    className,
    label,
    nodeId,
    icon: iconProp,
    expansionIcon,
    displayIcon,
  } = props;

  const {
    disabled,
    expanded,
    selected,
    focused,
    handleExpansion,
    handleSelection,
    preventSelection,
  } = useTreeItem(nodeId);

  const icon = iconProp ?? expansionIcon ?? displayIcon;

  const handleMouseDown = (
    event: React.MouseEvent<HTMLDivElement, MouseEvent>
  ) => {
    preventSelection(event);
  };

  const handleExpansionClick = (
    event: React.MouseEvent<HTMLDivElement, MouseEvent>
  ) => {
    handleExpansion(event);
  };

  const handleSelectionClick = (
    event: React.MouseEvent<HTMLDivElement, MouseEvent>
  ) => {
    handleSelection(event);
  };

  return (
    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
    <div
      className={cn(className, classes.root, {
        [classes.expanded]: expanded,
        [classes.selected]: selected,
        [classes.focused]: focused,
        [classes.disabled]: disabled,
      })}
      onMouseDown={handleMouseDown}
      ref={ref as Ref<HTMLDivElement>}
    >
      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
      <div onClick={handleExpansionClick} className={classes.iconContainer}>
        {icon}
      </div>
      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
      <div onClick={handleSelectionClick} className={classes.label}>
        {label}
      </div>
    </div>
  );
});

No response

Your environment 🌎

npx @mui/envinfo

    "@mui/base": "5.0.0-beta.8",
    "@mui/lab": "5.0.0-alpha.137",
    "@mui/material": "5.14.2",

Safari

Version 15.6.1 (17613.3.9.1.16)

[flaviendelangle]

Hi,
Thanks for your contribution.

Could you provide a working reproduction, this Codesandbox template might be a good starting point.

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.