Using "-webkit-overflow-scrolling: touch" can cause issues with the CSS 3D perspective rendering

Looking for a solution specifically for iOS Safari

Using 

-webkit-overflow-scrolling: touch
seems to disrupt the 3d perspective on iOS devices.

Check out the demonstration 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);}

Does anyone know of a workaround for this issue?

htmlioscssoverflowmobile-safari

Answer №1

Update, May 29

Oops! It seems I overlooked something important. The information below, though somewhat accurate, doesn't fully address the question at hand.

If you wish to maintain the configuration of the rotation as depicted, consider adding a div between .scroll and .el, and apply the following style:

{perspective:300px;}

It appears that swapping the .pers div with .scroll or adding another one after .scroll with the same perspective might be necessary.

Furthermore, try relocating the perspective: 300px; to .scroll. The angle may change as you scroll up or down.

Original Answer

In short, no. It's not possible to contain a 3D transform within a container with clipping, which is what seems to be attempted here.

The issue lies in the fact that overflow-y:scroll disrupts the transform-style property according to the specifications. This overflow property affects nested elements. If the problem persists, consider using the 

-WebKit-transform-style: preserve-3d
declaration on .scroll; however, keep in mind that iOS likely already establishes a stacking context in this scenario (Firefox requires this, while Webkit does not).

A potential solution could involve removing overflow:hidden from body and overflow-y:scroll from .scroll. You may need to make this part of the page/screen smaller and place image blocks inside it.

If you decide to take this approach, utilize transforms and creative techniques to mimic the desired effect. Note that opacity plays a significant role in this endeavor; similar to the transform-style specifications, applying opacity other than 1 on .el should be harmless since it's the final node. However, if opacity is added to .scroll, it may cause flattening of .el similar to the overflow behavior.

I have yet to conduct tests on iOS due to limited access to the device.

Note: In most desktop browsers supporting 3D transforms, setting an overflow value other than visible for the body typically does not pose any issues. I cannot confirm how this behaves on iOS/mobile devices.

Answer №2

It seems like the issue has not been addressed by Apple yet. To work around this problem, you can create a container with increased height and perspective around the element, and then set the 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);}

Answer №3

Unfortunately, the shared snippet is not functioning properly on Mozilla Firefox. Here is a solution that has been tested on iOS Safari/Chrome (iPhone-6S) and Windows Mozilla/Chrome:

It is advisable to avoid using -webkit-overflow-scrolling. There may be a potential issue with this feature as it is still in development [Reference Link]. Removing this property can result in the desired outcome. While it may not be a definitive solution, it could serve as a temporary fix.

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

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

Answer №4

I came across a helpful solution in this ARTICLE. The author also faced the same issue.

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

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

Answer №5


Take a look at this demonstration: http://codepen.io/tushar-chauhan/pen/yNgzem

Feel free to adjust the values to achieve your desired outcome. It is compatible with both mobile and desktop Safari. Below, you will find the HTML and CSS:

CSS & HTML provided 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

In order to position an inner div in the center and have it expand equally at the top and bottom according to the content size

I am currently working on a layout that involves an inner div with a text div. My goal is to center the inner text div vertically and increase the size of the text div equally from both the top and bottom based on the content size. Below is the approach ...

htmlcss

conceal only a few HTML elements

When a user enters text into my comment box, it is saved in the database with additional formatting. For example: aa @Martins <aabb> The saved version in the database looks like this: aa <span class="highlight" contenteditable="false">@Marti ...

phphtmltags

React Animation Library With Smooth Initial Render and No Dependency on External Props

I'm currently implementing a Modal component within my app, utilizing Portals. My goal is for the Modal to smoothly fade in when it is rendered and fade out when it is no longer displayed. Upon examining the documentation for react-transition-group, ...

cssreactjsanimationreact-transition-group

Tips for designing a search bar using Angular

search : ____________ I am interested in designing a search bar functionality that automatically triggers when the user inputs 8 or more characters. The input text will be stored in a variable, the search bar will be reset, and the backend API will be che ...

javascripthtmlangular

Vue is actively eliminating a background image through the use of the style attribute

There appears to be an issue where Vue is removing both the style attribute and the background image from this tag. <section style="background: url(images/banners/profiles/profile-banner-1.png);" class="profile-banner flex items-end md:items-end md:j ...

htmlcssvue.js

Attempting to alter the appearance of my validation control by implementing a custom style sheet theme

After naming a style sheet theme Basic and applying it to my web.config file, I created a Validator class in the css file. Utilizing the cssClass attribute with the Validator type, I successfully adjusted the font-weight property but struggled to change th ...

htmlcssasp.net

Avoiding overlapping in setTimeOut when using jQuery.hover()

Looking to trigger an effect one second after the page loads, and then every 3 seconds in a loop. When the user hovers over a specific element with the ID #hover, the effect should pause momentarily. It should then resume 2 seconds after the user stops hov ...

javascriptjqueryhtmlcsssettimeout

What are some ways to utilize my mouse to launch projectiles at various locations?

Is there a way to make my projectile shoot using my mouse instead of clicking buttons? I want it to be able to shoot at any position x,y without having to click multiple buttons. # Updated projectile class if keys[pygame.K_f]: for bullet ...

pythonhtmlpygame

One way to eliminate a prefix from a downloaded file path is by trimming the URL. For example, if you have a URL like "http://localhost

As my web app runs on port number, I am looking to download some files in a specific section. However, the download file path is being prefixed with "". <a href={file_path} download={file_name}> <Button variant={"link"}> <b>Dow ...

javascripthtmlreactjsreact-reduxreact-bootstrap

Is a Selenium loop a viable option?

</head> <body> <table cellpadding="1" cellspacing="1" border="1"> <thead> <tr><td rowspan="1" colspan="3">test</td></tr> </thead><tbody> <tr> <td>click& ...

javascriptjqueryhtmlselenium-ide

Is there a way to make the first Image Element within the div automatically clickable?

Is there a way to set the first image in a div as the default clicked element? I have a div with multiple images and I want the first one to be clicked by default. This is part of a React functional component that serves as a view. <div className=&quo ...

javascripthtmlreactjsreact-hooks

Which web browser(s) can properly display the CSS property display: run-in?

Compatibility with IE7 and FF2.0 Suitable for IE8 and Opera 9+ Works only on IE7 Optimized for IE8 and FF3.5 Supports IE7 and Safari This question came up in a quiz, but I don't have all the browsers to test it. Any assistance would be greatly apprec ...

css

Is there a way to use jQuery to load a ul from a different webpage into a div?

Progress is being made as I work on making two nearly identical pages function seamlessly together. One page features an alphabet list, and when a letter is selected, the other page filters results (last names from a PHP database query) and displays them o ...

phpjqueryhtml

Is your Navbar having trouble readjusting its height?

My navbar is not resizing properly when I shrink the logo image. Here's a link to the Codepen page with the full code: https://codepen.io/gabor-szekely/pen/JeMqQz I'm trying to reduce the size of the "Sino Medical" logo image in the top left co ...

htmlcssnavbarmargin

Tips for dynamically resizing a div element as a user scrolls, allowing it to expand and contract based on

I was working on a project and everything seemed easy until I hit a roadblock. What I am trying to achieve is expanding a div to 100% when scrolling down to the bottom of the div, then shrink it back to 90% at the bottom and do the reverse when scrolling ...

javascriptcssreactjssassnext.js

Horizontal rule spans the full width of the content, appearing within an ordered list

Check out this example to see the issue with the horizontal rule not extending all the way across under the number. I've tried using list-style-position:inside;, but that interferes with positioning the number correctly due to the left image being flo ...

htmlcss

Conflicting behavior between jQuery focus and blur functions and retrieving the 'variable' parameter via the $_GET method

There is a simple focus/blur functionality here. The default value shown in the 'Name of Venue' input field changes when the user clicks on it (focus) and then clicks away(blur). If there is no text entered, the default value reappears. Input fi ...

phpjavascriptjqueryhtml

Execute a webpage in the background using PHP

Currently, I'm working on creating a basic PHP script to fetch four images from a server. The catch is that each time I retrieve a new image, I have to access a webpage first - like this: http://example.com/Set.cgi?Image=1 I don't have the abili ...

phpcgihtml

How can one determine the dimensions of the browser window using a property?

Can someone please clarify how to find the width and height of the browser window specifically? Thanks in advance! ...

javascripthtmlcss

The code will only detect the browser when accessed from a mobile device, and will display a

I've experimented with various methods to make this work. My website has a streaming radio player at the top of the page, usually using the default script provided: <center> <!--Wavestreaming.com SHOUTcast Flash Player--> <scri ...

jqueryhtmlbrowser-detection