not working on Safari

[victororlyk]

Describe the bug Just see how it looks at the browser.

Chrome:

Safari:

Expected behavior A clear and concise description of what you expected to happen. To work just the same on all browsers Reproducible example

Additional context Add any other context about the problem here. Here you may look at my code

import React, { useRef, useEffect, memo, useContext } from 'react';
import styled from 'styled-components';
import SimpleBar from 'simplebar';

import Thumbnail from './Thumbnail';
import breakpoints from '../../../../styles/breakpoints';
import z from '../../../../styles/zIndex';
import { StateContext } from '../../../store/store';

function VideoContainerDesktop({
    handleScroll, items, handleImageLoaded, handleOpenModal, handleScrollSizes,
}) {

    const { state: { visibleScreen } } = useContext(StateContext);

    const videoContainer = useRef();
    const left = useRef();
    const right = useRef();

    useEffect(() => {
        const leftScroll = new SimpleBar(document.getElementById('left'), {
            autoHide: false,
            forceVisible: true,
        });

        const rightScroll = new SimpleBar(document.getElementById('right'), {
            autoHide: false,
            forceVisible: true,
        });
        console.log(leftScroll, rightScroll, 'scrolls');
        rightScroll.getScrollElement().addEventListener('scroll', e => {
            videoContainer.current.scrollTop = e.target.scrollTop;
        });

        leftScroll.getScrollElement().addEventListener('scroll', e => {
            videoContainer.current.scrollTop = e.target.scrollTop;
        });

        videoContainer.current.addEventListener('scroll', e => {
            rightScroll.getScrollElement().scrollTop = e.target.scrollTop;
            leftScroll.getScrollElement().scrollTop = e.target.scrollTop;
        });

        const { scrollHeight: sh, offsetHeight: oh } = videoContainer.current;
        const scrollTrack = document.querySelector(
            '.simplebar-track.simplebar-vertical');
        handleScrollSizes(sh, oh, scrollTrack.offsetHeight);
    }, []);

    useEffect(() => {
        if (visibleScreen !== 'main') {
            const videos = document.getElementById('videos');
            videos.style.overflow = 'hidden';
        }
    }, [ visibleScreen ]);

    const handleEnableScroll = () => {
        const videos = document.getElementById('videos');
        videos.style.overflow = 'scroll';
    };

    return (
        <>
            <ScrollContainer
                id="left"
                className="wrapper1"
                ref={ left }
                forceVisible="y"
                autoHide={ false }
            >
                <div className="some" />
            </ScrollContainer>

            <Logo
                src='/static/img/animations/machineCrop.gif'
                alt='logo'
            />

            <ContainerWithVideos onClick={ handleEnableScroll }>
                <Videos
                    id="videos"
                    ref={ videoContainer }
                    onScroll={ handleScroll }
                >
                    { items.map(({ id }, index) => (
                        <ThumbnailContainer
                            key={ id }
                            className='thumb_regular'
                        >
                            <Thumbnail
                                onHandleImageLoaded={ handleImageLoaded }
                                onHandleOpenModal={ handleOpenModal }
                                { ...{
                                    id,
                                    index,
                                } }
                            />
                        </ThumbnailContainer>
                    )) }
                </Videos>
            </ContainerWithVideos>
            <ScrollContainer
                id="right"
                ref={ right }
                forceVisible="y"
                autoHide={ false }
            >
                <div />
            </ScrollContainer>
        </>
    );
}

const ContainerWithVideos = styled.div`
    width: 80vw;
  height: 77vh;
  overflow: hidden;
  padding: 90px 10px 5px 20px;
  box-sizing: border-box;
    .prev, .next{
         position: absolute;
         top: 50%;
         background-color: transparent;
         border:none;
         outline: none;
         min-height: 35px;
         height: 10%;
         img{
            height: 100%;
         }
     }
    .prev{
        left: 0;
     }
    .next{
        right: 0;
     }
    .hide{
        display: none;
     }   
    ${ breakpoints.tablets }{
            background-image: url('/static/img/portfolio/bg_for_videos.png');
            background-size:     auto auto;
            background-position: center center;
        }
    ${ breakpoints.desktops }{
            width: 72vw;
            overflow:hidden;
            padding: 60px 60px 16px 30px;
            box-sizing:border-box;
        }
`;

const ScrollContainer = styled.div`
    ${ breakpoints.desktops }{
        width:60px;
        height: ${ ({ theme: { offsetHeight } }) => offsetHeight }px;
        position:relative;
        z-index:${ z.aboveDefault };
      --scrollback: #383838;
      --scrollactiveback: #aeaeae;
      .simplebar-track{
            background:var(--scrollback);
            width:3px;
            padding:0;
            left: 50%;
            transform: translateX(-50%);
      }
      .simplebar-scrollbar{
            background:var(--scrollactiveback);
            width:100%;
            right:0;
            &:before{
            background:var(--scrollactiveback);
        }
      }
      .simplebar-scroll-content{
            background:var(--scrollactiveback);
            width:100%;
            margin:0;
      }
      .simplebar-content{
        div{
            height:${ ({ theme: { scrollHeight } }) => scrollHeight }px;
      }
      }
      &::before{ 
            display: block;
            content: ${ ({ theme: { arrows } }) => `url(${ arrows.up })` };
            position: absolute;
            right:16px;
            top:-6px;
            z-index: ${ z.imagesAbove };
        }
      &::after{
            display: block;
            content: ${ ({ theme: { arrows } }) => `url(${ arrows.down })` };
            position: absolute;
            right:16px;
            bottom:-10px;
            z-index: ${ z.imagesAbove };
        }}
`;

const Logo = styled.img`
  height: 10vh;
  max-width: 356px;
  max-height: 60px;
  width: 55vw; 
  top: 7%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: ${ z.imagesAbove };
  ${ breakpoints.mobiles }{
    max-height: 75px;
    @media(min-height: 736px){
        top:10%;
    }
    @media(min-height: 811px){
      top: 13%;
    }
  }
  ${ breakpoints.tablets }{
    max-height: 113px;
    height: 14vh;
    top:7%;
  }
  ${ breakpoints.desktops }{
    width: 400px;
    height: 200px;
      top: 9%;
  } 
  ${ breakpoints.desktopsXL }{
    width: 35vw;
    max-height: 150px;
    top: 9%;
    max-width: 656px;
  } 
`;

const ThumbnailContainer = styled.div`
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #000000;
    &.thumb_regular{
        height: 130px;
        width: 90%;
        margin: 20px auto;
        overflow: hidden;
        box-sizing: border-box;
        &.thumb_regular:nth-child(-n + 1){
            margin-top: 0;
        }
        ${ breakpoints.tablets }{
            width:44%;
            margin: 2% 0;
            min-height: 33%;

            &.thumb_regular:nth-child(-n + 2){
                margin-top: 0;
            }
            &.thumb_regular:nth-child(odd){
                margin-right: 5%;   
            }
        }
        ${ breakpoints.desktops }{
            width:30%;
            height: 26%;
            box-sizing: border-box;
            overflow: hidden;   
            &.thumb_regular:nth-child(-n + 3){
                margin-top: 0;
             }
            &.thumb_regular:nth-child(odd){
                margin-right: initial;  
            }
        }
        ${ breakpoints.desktopsXL }{
            height: 44%;
        }   
  }
`;

const Videos = styled.div`
    padding-right: 5% ;
    height: 100%;
    overflow-y: scroll;
    position:relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
    width: 109%;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none; 
    ::-webkit-scrollbar{
        display: none;
    }
    ${ breakpoints.tablets }{
        width: 107%;
    }
`;

export default memo(VideoContainerDesktop);

Your environment

Software	Version(s)
SimpleBar	5.1.0
Browser	Safari 13.0.5
npm/Yarn	npm 6.10.0
Operating System	macOS Catalina 10.15.3

[Manviel]

Uncaught SyntaxError: Unexpected token '{'