Фиксированная позиция не выскакивает изображение из div

Question

У меня проблема с отображением изображений в моем проекте. Я хотел бы показать изображение при наведении текста. Он работает правильно, если используется Chrome, но, по крайней мере, в Safari изображение частично скрыто внутри родительского элемента.

Снимок экрана из Chrome

Снимок экрана из Safari

Код для родительского элемента:

const PortfolioItemsWrapper = styled.div`
  width: 100%;
  max-width: 960px;
  position: fixed;
  bottom: 0;
  overflow-x: scroll;
  white-space: nowrap;
  display: block;
  text-align: center;
  justify-content: center;
`

<PortfolioItemsWrapper>
 {props.allWordpressWpPortfolio.edges.map(portfolioItem => (
  <PortfolioWorks
   key={portfolioItem.node.id}
   image={portfolioItem.node.featured_media.source_url}
   id={portfolioItem.node.id}
   title={portfolioItem.node.title}
   link={`/portfolio/${portfolioItem.node.slug}`}
  />
 ))}
</PortfolioItemsWrapper>

Код для изображения:

const Wrapper = styled.div`
  display: inline-block;
  margin: 0 10px;
`

const ImageWrapper = styled.div`
  max-width: 300px;
  position: fixed;
  top: 50%;
  left: 50%;
`

const PortfolioImage = styled.img`
  max-width: 300px;
  z-index: -5;
  opacity: 0;
  transition: 0.25s linear;
`

    <Wrapper key={id}>

      <ImageWrapper>
        <PortfolioImage style={imageStyle} src={image} />
      </ImageWrapper>

      <PortfolioItemNameLink to={link} onMouseEnter={changeStyle} onMouseLeave={resetStyle}>
        {title}
      </PortfolioItemNameLink>
    </Wrapper>

Answer 1

Я понял это правильно, просто довольно случайно проверяя вещи. Не знаю почему, но это работает. Если кто-то знает, почему я хотел бы знать.

Я установил фиксированную позицию для родительского div в PortfolioItemsWrapper.

const Wrapper = styled.div`
  width: 100%;
  max-width: 960px;
  position: fixed;
  bottom: 0;
`

const PortfolioItemsWrapper = styled.div`
  width: 100%;
  max-width: 960px;
  white-space: nowrap;
  overflow-y: visible;
  overflow-x: scroll;
  display: block;
  text-align: center;
  justify-content: center;
`

Answer 2

Хотя я не уверен, что это может сработать:

Попробуйте добавить overflow-y: visible; к вашим родителям css.

Дайте мне знать, если это сработает:)