After spending several months working on a page, I noticed an unusual behavior in webkit-based browsers. I had implemented an input element using a technique I inquired about here Create quadrilateral with specific degree. Everything was functioning well in all browsers except for webkit.
I researched this particular issue and attempted to discover existing workarounds. One suggested fix looked like this:
@supports (-webkit-overflow-scrolling: touch) {
transform: translate3d(0, 0, 0);
}
Unfortunately, this approach did not resolve the problem.
To showcase the glitch, I created a project available at:
In addition, I developed a simpler 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 appears in most browsers:
And here is how it looks in webkit-based browsers:
At this point, I am actively seeking a workaround for this issue as I do not anticipate a quick resolution. It's unclear whether this is a webkit bug or a flaw in my CSS code, but given that it works fine in every other browser, I suspect it may be a webkit issue.
I came across a WebKit Bug Report that might shed some light: