"-webkit-overflow-scrolling: touch" breaks css 3d perspective

Question

Searching for a solution for iOS safari ONLY

When using -webkit-overflow-scrolling: touch it breaks the 3d perspective on iOS.

See the demo on CodePen.

HTML

<div class="pers">
  <div class="scroll">
    <div class="el">
    </div>
  </div>
</div>

CSS

.pers {perspective:300px;}
.scroll {overflow-y:scroll;-webkit-overflow-scrolling:touch; height:100vh;}
.el {-webkit-transform:rotateX(80deg);transform:rotateX(80deg);}

enter image description here

Is there a workaround?

That is a weird bug, and unfortunately the transform: translateZ(0); hack that works for some other -webkit-overflow-scrolling: touch; bugs doesn't seem to help. BTW, I think your codepen might be missing some code, as removing -webkit-overflow-scrolling: touch; doesn't make it work either. Here's a codepen that showed the issue for me: codepen.io/anon/pen/pJNoNW — Alexander O'Mara
– Alexander O'Mara, Commented May 24, 2015 at 16:29
Does anybody knows if implementing a native overflow WITH MOMENTUM is on Apple's roadmap (without all that -webkit-overflow-scrolling: touch; mess) ? Any link appreciated. — abernier
– abernier, Commented Mar 11, 2016 at 16:04
Inertial scrolling is not a part of any spec that I know of, so it probably won't be unprefixed. — Alexander O'Mara
– Alexander O'Mara, Commented Mar 11, 2016 at 19:48
There seems to be a problem with overflow and -webkit-overflow-scrolling. Remove overflow and perspective is correct but the overflow is not handled correctly. — Andrew Li
– Andrew Li, Commented Jan 13, 2017 at 12:01
@AndrewLi just tested removing the overflow-y:scroll; from .scroll: it does NOT correct the perspective which is still flat... tested on that forked version codepen.io/abernier/pen/RKRoOY on an iPad — abernier
– abernier, Commented Jan 13, 2017 at 12:20

mhatch · Accepted Answer · 2017-09-25 14:02:18Z

9

+250

Update, May 29

Doh! I so stupid. The below, while true...ish doesn't address the question well enough.

If you want that configuration of the rotation to stay the same as you have illustrated, add a div between .scroll and .el, and style it such:

{perspective:300px;}

Thus, it would seem that you want the .pers div switched with .scroll or add another after .scroll with the same perspective.

Also, try moving the perspective: 300px; to .scroll. The angle appears to change as one scroll up or down.

Original Answer

The answer is not really. One cannot contain a 3D transform inside a container with clipping which is being attempted here.

The problem is overflow-y:scroll breaks the transform-style property as per spec. The overflow-y affects the nested element. If your problem persists, you may also have to use the -WebKit-transform-style: preserve-3d declaration on .scroll, though I think iOS already has a stacking context established in this case (Firefox requires this, Webkit seems not to).

One solution is to remove your overflow:hidden from body and overflow-y:scroll from .scroll, but I suspect you are going to want to have that as a smaller part of the page/screen and move image blocks inside it.

If this is the case, you will need fake this with transforms and some clever hackery and should use opacity be part of this endeavor, please note that this too (as in spec above, right below the transform-style) causes the flattening effect when not applied to the final node. Let's say you had opacity other than 1 on .el, you are fine here as .el is the final node, but if opacity was applied to .scroll, the same flattening of .el occurs as with the overflow.

Have yet to test on iOS as I lack access to the device.

Note: setting an overflow value other than visible for the body does not cause this issue on most desktop browsers that support 3D transforms. I do not know about iOS/mobile.

edited Sep 25, 2017 at 14:02

mhatch

4,6376 gold badges43 silver badges67 bronze badges

answered May 24, 2015 at 18:48

thisiate

1,0656 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

abernier Over a year ago

Can you provide live demos links ? Maybe the question isn't very clear but it is about iOS Safari mobile only. It works great on other browsers. So I'm just looking for a solution to it.

thisiate Over a year ago

I will try it out in the later today when I have access to my friend's iPhone. There is no doubt that the scrolling touch hack is interfering with the 3D. There is the distinct possibility that it cannot be fixed as iOS webkit has some funny interpretations of 3D transforms where the desktop Safari and Chrome display correctly. Do you need iPad also, or only phone?

abernier Over a year ago

Unfortunately, this does not answer the question. Thx for participating anyway ;)

abernier Over a year ago

can you provide a codepen of your last answer to clarify ? thx ;)

abernier Over a year ago

sorry to bother you again, but you seem to have a solution but unfortunately I can't really understand your explainations. Can you just provide a codepen in order I could validate your solution ? thx ;)

|

user1911959 · Accepted Answer · 2020-07-11 10:10:26Z

0

I think it is the bug that didn't fixed from apple yet. only way to solve this problem is put container with Higher height and perspective around element then make upper container to scroll it.

<div class="pers">
  <div class="scroll">
     <div class="widerHeight">
       <div class="el">
       </div>
     </div>
  </div>
</div>

.

.pers {/*perspective:300px;*/}
.scroll {overflow-y:scroll;-webkit-overflow-scrolling:touch;height:100vh }
.widerWidth {min-height:1000px;perspective:300px;}
.el {-webkit-transform:rotateX(80deg);transform:rotateX(80deg);}

answered Jul 11, 2020 at 10:10

user1911959

5845 silver badges16 bronze badges

Comments

Amber Beriwal · Accepted Answer · 2017-01-13 10:11:11Z

-1

The shared snippet does not work on Mozilla Firefox as well. Below is the solution tested for iOS Safari/Chrome (iPhone-6S), Windows Mozilla/Chrome:

no need to use -webkit-overflow-scrolling. There could be a possible bug for this feature as it is under development [Reference Link]. Removing this property generates the desired behavior. It might not be the exact solution, but it can act as a workaround.

.scroll {perspective:300px;overflow-y:scroll;height:100vh;}
.el {-webkit-transform:rotateX(80deg);transform:rotateX(80deg);}

Codepen: http://codepen.io/anon/pen/LxZZdX

edited Jan 13, 2017 at 10:11

answered Jan 12, 2017 at 17:53

Amber Beriwal

1,60818 silver badges31 bronze badges

1 Comment

abernier Over a year ago

You're right -- and of course :) -- not using -webkit-overflow-scrolling solves the issue BUT there is no more momentum scrolling which was exactly what I was looking for using that property :))

ATechGuy · Accepted Answer · 2017-01-18 00:53:07Z

-1

This snippet from HERE might do it. They seem to have had this issue as well

.outer {`enter code here`
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  /* More properties for a fixed height ... */
}

.inner {
  height: calc(100% + 1px);
}

answered Jan 18, 2017 at 0:53

ATechGuy

1,2809 silver badges14 bronze badges

1 Comment

abernier Over a year ago

can you fork the original codepen and apply your solution to it? I fear the issue it adresses isn't related with the 3d one...

Tushar · Accepted Answer · 2015-05-30 02:12:15Z

-3

Please check this demo: http://codepen.io/tushar-chauhan/pen/yNgzem

You can try tweaking the values to get your desired results. This works on both mobile & desktop Safari. I am posting the HTML & CSS here too:

CSS & HTML below:

body{
  width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
.pers{
  -webkit-transform-style: preserve-3d;
  -webkit-perspective: 300px;
  height: 120vh;
  margin: 0 auto; overflow-y: auto;
}
.scroll {
  height: inherit;
  -webkit-overflow-scrolling:touch;
}
.el {
  width: 10em; height: 10em; background: url(http://placehold.it/200x200);background-size:cover;
  margin: 80vh auto;
  -webkit-transform-origin: 50% 35%;
  -webkit-transform: rotateX(80deg);
  transform: rotateX(80deg);
}

<div class="pers">
  <div class="scroll">
    <div class="el">
    </div>
  </div>
</div>

edited May 30, 2015 at 2:12

answered May 30, 2015 at 1:58

Tushar

1791 gold badge1 silver badge5 bronze badges

1 Comment

Tushar Over a year ago

It does retain the 3d-perspective on scroll. I tried to make some changes with respect to momentum scrolling, but it seems like mobile safari behaves in a different way while scrolling with 3d perspective on.

Collectives™ on Stack Overflow

"-webkit-overflow-scrolling: touch" breaks css 3d perspective

5 Answers 5

6 Comments

Comments

1 Comment

1 Comment

CSS & HTML below:

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

Comments

1 Comment

1 Comment

CSS & HTML below:

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related