Контент не заполняет div с помощью border-radius в сафари или на мобильном устройстве

Question

Привет, сейчас я делаю баннер для веб-страницы, используя стилизованные компоненты. Баннер имеет радиус границы 50%, а фоновое изображение настроено на анимацию при наведении курсора.

На chrome это выглядит так:

Однако на сафари и на моем iPhone не заполняется контейнер div справа оставляет белую линию, которая выглядит следующим образом:

Однако во время воспроизведения анимации он заполняет контейнер. Я вставлю свой код ниже:

 import styled from 'styled-components'

    export const BannerBackground = styled.div`
          width: 100%;
          height: 100%;
          background-image: url(${props => props.backgroundImage});
          background-position: center;
          background-size: cover;
          position: absolute;
          transition: transform ease-in-out 1s;
          border-radius: 10px;

    `

export const BackgroundFade = styled.div`
      background-color: rgba(50,50,50, 0.6);
      position: absolute;
      height: 100%;
      width: 100%;
      transition: background-color ease 300ms;
      border-radius: 10px;

`
export const BannerContainer = styled.div`
      cursor: pointer;
      width: 90%;
      min-height: 150px;
      margin: 50px 0;
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 0 10px #555555;
      border-radius: 10px;
      overflow: hidden;
      &:hover ${BannerBackground} {
            transform: scale(1.1);
      }
      &:hover ${BackgroundFade} {
            background-color: rgba(50,50,50, 0.8);

      }
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0)
`

export const BannerTitle = styled.div`
      font-size: 3vw;
      color: white;
      z-index: 2;
      margin: 0 40px;
      text-align: end;
      font-weight: 600;
      text-align: center;
      @media (max-width: 1000px) {
            margin: 0;

      }

      @media (max-width: 800px) {
            font-size: 4vw; 
      }

`
export const BannerSubtitle = styled.div`
      font-size: 2.75vw;
      color: white;
      z-index: 2;
      margin: 0 40px;
      color: rgb(50, 255, 150);
      font-weight: 600;
      @media (max-width: 1000px) {
            margin: 0;
      }

      @media (max-width: 800px) {
            font-size: 4vw; 
      }

`

export const BannerTextContainer = styled.div`
      color: white;
      z-index: 2;
      width: 60%;
      display: flex;
      flex-direction: column;

      @media (max-width: 1000px) {
            width: 80%;
      }

`
export const BannerImage = styled.div`
      background-image: url(${props => props.backgroundImage});
      background-position: center;
      background-size: cover;
      width: 100px;
      height: 100px;
      margin: 0 40px;
      z-index: 2;
      border-radius: 5px;

      @media (max-width: 1000px) {
            height: 50px;
            width: 50px;
      }
`

Код реакции:

import React from 'react'
import { BannerContainer, BackgroundFade, BannerTitle, BannerTextContainer, BannerImage, BannerSubtitle, BannerBackground } from './banner.styles'

const Banner = () => {
      return (
            <BannerContainer>
                  <BannerBackground
                        backgroundImage='https://images.unsplash.com/photo-1471174617910-3e9c04f58ff5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3750&q=80'
                  />
                  <BackgroundFade/>
                  <BannerTextContainer>
                        <BannerTitle>MOT FOR ALL CUSTOMERS</BannerTitle>
                        <BannerSubtitle>FREE DURING COVID-19</BannerSubtitle>
                  </BannerTextContainer>
                  <BannerImage backgroundImage='https://images.netdirector.co.uk/gforces-auto/image/upload/q_auto,c_crop,f_auto,fl_lossy,x_66,y_33,w_400,h_400/w_784,h_784,c_fill/auto-client/e6dd6944a9f58f246c0a0d687f6725f7/mot_logo.png'/>
            </BannerContainer>
      )
}

экспорт баннера по умолчанию

Я не могу понять, почему это происходит, могу кто-нибудь поможет? Заранее спасибо.

(Мне также пришлось исправить проблему с исчезновением радиуса границы во время анимации, для чего предназначена часть translate3d.)