Workaround for webkit overlapping glitch

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:

Chrome

This is how it looks in webkit based browsers

Safari

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

score 0 · Answer 1 · answered Jun 05 '19 at 19:03

0

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 :)

answered Jun 05 '19 at 19:03

Toxi

109
5

1

I provided a glitch project, which you can fork and edit. It is like jsfiddle in better. Anyway, it is not an size problem. If you inspect the element in safari, it has the correct height, it just stops rendering the element after a certain height. You can see it in this [Image](https://imgur.com/a/36MgSBO) – Noim Jun 05 '19 at 19:08
OK, but you are using a fixed high on the background class, whats wrong with set a min-height if u want 5 elems minimum, also try out `overview:visible;` in content class. In meanwhile i check out your glitch project and try to make you an stable example... – Toxi Jun 05 '19 at 19:44
It doesn't matter whether `min-*` or a fixed. And `overview:visible;` does not improve the situation. Keep in mind, the project I provided is just for demonstration what I mean. I just wanted to show the glitch/bug. The same glitch can happen in different situations, but I thought this fits the case best as demonstration. – Noim Jun 05 '19 at 19:50
Sounds like you do not want to solve this issue :) in my Safari it works with position absolute on .content, i´ve seen you have already tried? – Toxi Jun 05 '19 at 20:24
additional i have to say that you have to accept that browsers interpret each css code as they own way. if this is a need that you won´t use fixes you can try to fix this issue with js – Toxi Jun 05 '19 at 20:36
_> Sounds like you do not want to solve this issue_ sure I want. You just did not provide any valid answer. And solve a css glitch with js? What, of course not. _> additional i have to say that you have to accept that browsers interpret each css code as they own way._ This is obviously a not intended glitch. – Noim Jun 06 '19 at 17:06

score 0 · Accepted Answer · answered Jun 16 '19 at 09:35

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

Workaround for webkit overlapping glitch

2 Answers2