ForeignObject в svg неправильно позиционируется при переполнении текста в Chrome

Question

Div внутри foreignObject перемещается из foreignObject, когда высота div больше, чем высота foreignObject. Я не могу правильно расположить div. У кого-нибудь есть решение или возникла та же проблема?

Такая ситуация возникает только на дисплее MacBook, но работает нормально, если я помещаю браузер в дисплей с двумя мониторами.

Я использую Google Chrome Версия 70.0.3538.77 (Официальная сборка) (64-разрядная версия). Я также использую Apple MacBook Pro 15 дюймов версия 10.13.3 MacOS Highsierra.

Изображение - монитор Macbook по умолчанию Изображение - Macbook с монитором Dell

svg {
   border: 1px solid black;
}          
foreignObject {
   border: 1px solid blue;
   transform: translate(50px, 50px);
}
div {
   border: 1px solid red;
   height: 100px;
   overflow: scroll;
}

<svg height='500px' width='500px'>
      <foreignObject height='100px' width='100px'>
         <div  xmlns="http://www.w3.org/1999/xhtml">
            Bacon ipsum dolor amet ball tip burgdoggen t-bone pastrami, ground
         </div>
      </foreignObject>
</svg>