Workaround for webkit overlapping glitch - css

Question

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

Answer 1

at first, dont use h1 for those purposes, in terms of search engine optimization that would be a disaster. :)
I think your issue is in the content class. Have tryed min-height?
CSS Code
.content {
min-height:300px; /* for example */
}
Otherwise it would be usefull if u provide an js fiddle or anything :)

Answer 2

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