Workaround for webkit overlapping glitch

After working on a page for some months, I noticed a weird behavior in webkit based browsers. I implemented an input element with a technic I asked here Create quadrilateral with specific degree Everything works fine in all browsers, except webkit.

I search for this exact behavior and tried to find existing workarounds. An example for a suggested fix:

@supports (-webkit-overflow-scrolling: touch) {
    transform: translate3d(0, 0, 0);
}

However this doesn't work.

I created a glitch project with the problem: https://glitch.com/~safari-bug-overflow

However, I also created more simple example:

<div>
    <div class="wrapper">
        <div class="background"></div>
        <div class="content">
            <h1>
                Test
            </h1>
            <h1>
                Test
            </h1>
            <h1>
                Test
            </h1>
            <h1>Test</h1>
        </div>
    </div>
</div>
<style>
.background {
    position: absolute;
    transform: rotateX(58.6297041833deg) rotate(45deg);
    background-color: green;
    top: 96.619312px;
    left: 3.4641016151px;
    transform-origin: right top;
    border-radius: 100px;
    width: 500px;
    height: 500px;
}

.wrapper {
    position: releative;
}

.content {
    position: relative;
}
</style>

This is how it looks in most browsers:

This is how it looks in webkit based browsers

Now I need to find a workaround for the issue, because I don't expect any fix in the near future. I am not even sure, whether this is a bug in webkit or a bug in my css. I think it is webkit, because it works in every other browser.

I found a WebKit Bug Report: https://bugs.webkit.org/show_bug.cgi?id=182520

I found a solution by myself. One day I thought, maybe webkit uses a different z start position. Then I tried to move the div away. And it worked.

You can apply translateZ first on your transformation to fix the bug:

.background {
    position: absolute;
    transform: rotateX(58.6297041833deg) rotate(45deg);
    -webkit-transform: translateZ(-1000px) rotateX(58.6297041833deg) rotate(45deg);
    background-color: green;
    top: 96.619312px;
    left: 3.4641016151px;
    transform-origin: right top;
    border-radius: 100px;
    width: 500px;
    height: 500px;
}

.wrapper {
    position: releative;
}

.content {
    position: relative;
}

Notice the translateZ(-1000px) on -webkit-transform