Float элемент в Firefox неправильно отображается

Как исправить неправильное отображение float элемента в фаерфоксе? Пример:

https://codepen.io/Ssivenkov/full/OJRwqvq

В хроме отображается нормально, а в фаерфоксе почему-то появляется пустое пространство

<div class="float-polygon"></div>
    <p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error exercitationem asperiores corrupti amet, sapiente voluptate excepturi facilis distinctio libero quisquam cupiditate quibusdam quis natus vitae facere inventore dolores eos nobis quae nemo incidunt nam cumque repellat minima. Voluptatum eos fuga vitae quam quidem necessitatibus error doloribus, voluptate, deleniti explicabo ipsa beatae. Tenetur quae vero, excepturi, illo et animi similique laborum dolores quasi totam, veritatis ipsum tempora libero natus! Laborum quos minus quaerat. Adipisci, deleniti corrupti! Vitae harum libero necessitatibus magnam aliquam accusamus, vero fuga unde delectus exercitationem, provident quo? Dolores voluptatum, exercitationem deserunt consequatur, accusantium veritatis quaerat modi qui vero esse earum odio, labore nihil harum et voluptatibus ipsum ipsam perspiciatis! Architecto, sunt similique tempore consectetur, nobis possimus eius natus fugit repellat nisi enim, in cupiditate facilis sint deserunt assumenda voluptatibus fuga repudiandae vel minima nemo error qui molestiae magnam. Perspiciatis modi esse quia voluptate dolor non fuga atque illum maiores sint minima similique, dicta culpa eveniet at veritatis vitae ducimus tempora ex, aut soluta, ad autem? Illo, obcaecati facere vel magni dicta, beatae voluptates porro enim ducimus ratione sequi ad reiciendis sapiente exercitationem, aut consequuntur eius maxime. Voluptatibus laudantium inventore saepe minima consequuntur deleniti reiciendis necessitatibus ad culpa ea. Fugit nihil fugiat ipsam, repudiandae culpa distinctio soluta? Laborum nisi quos quisquam vel necessitatibus ipsa ea, eos obcaecati sit veritatis dolores ducimus porro, nostrum recusandae facere aliquam sequi temporibus repellat dolorem voluptas perspiciatis magnam. Aliquam sapiente placeat similique eveniet nisi, quam sunt. Alias quidem, id omnis fuga hic a porro velit reprehenderit tempore sapiente culpa? Quibusdam architecto quaerat voluptatem eligendi eos explicabo voluptatibus, eum necessitatibus voluptates iusto expedita quo natus nobis tempora adipisci laboriosam quod assumenda beatae labore qui asperiores doloremque! Cumque ad laborum enim rem similique distinctio nesciunt velit labore dicta doloribus saepe obcaecati, impedit officiis nulla neque! Qui.</p>

* {
    padding: 0;
    margin: 0;
    border: 0;
}

.float-polygon {
    opacity: 0.5;
    background: #00f;
    background-size: contain;
    height: 21.2vmax;
    width: 100vw;
    float: right;
    shape-margin: 1vw;
    shape-outside: polygon(0 0, 100% 0, 100% 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.text {
    font-size: 20px;
    padding: 0 5vw;
}