Check out this demo: http://jsfiddle.net/11ec63xj/1/
If you try to open the above example on a mobile device, or in the result section of jsfiddle, click and drag to the right. When swiping to the right on a mobile device, it will break.
.parallax {
overflow-x: hidden;
overflow-y: auto;
}
I have also attempted using user-scalable=no, but the issue persists.
Once more, this time with a solution.. sort of The issue lies within your
.parallax__layer--back {
-webkit-transform: translateZ(-300px) scale(2);
transform: translateZ(-300px) scale(2);
z-index: 3;
}
.parallax__layer--deep {
-webkit-transform: translateZ(-600px) scale(3);
transform: translateZ(-600px) scale(3);
z-index: 2;
}
The scale() property specifically causes your elements to extend beyond the viewport
Using overflow: hidden does not work well on mobile devices, especially when user-scrollable is set to no/0
Mobile devices tend to ignore or override this command in the meta viewport (reason unknown)
You have three potential solutions:
Rebuild the website and create the effect without using scale(), which should work perfectly
Disable scrolling altogether, but this means restricting movement in both vertical and horizontal directions
<script>
document.body.addEventListener('touchstart', function(e){ e.preventDefault(); });
</script>
Utilize Hammer or TouchSwipe libraries to selectively disable scrolling on certain axes
For example, you can achieve it like this JSFIDDLE
Is there a way to post the Form without using the Submit method? If I were to use JQuery, how would I go about handling the Form input controls? ...
What is the best way to style a child component when hovering on a parent component, even across component boundaries in Angular 17? The traditional method of using parent:hover .child in the parent CSS doesn't seem to work on the child component. Is ...
I attempted to insert the HTML code for a button into my main index.html file after a specific line, but I encountered a strange issue. While the button displayed correctly, the homepage of my website suddenly vanished without any explanation. Here is the ...
I'm trying to create a special design element: a muted video that zooms in when the mouse hovers over it, but remains the same size as it is clipped at the edges. It would be even more impressive if the video could zoom in towards the point where the ...
Currently, I am working on a mixin that will target a specific child element within a parent. For instance, my goal is to target all <a> tags within a parent element that also has a parent of section---blue. I initially thought that passing the tag ...
Here is my current CSS: button { background: @button-background; color: @text; &.focus { background-image: linear-gradient(#79d858, #569e3d); border-color: #4a993e; color: white; ...
When I added a jQuery content slider to my website, it displayed incorrectly in Internet Explorer, showing a distorted header as well. The screenshot below illustrates the issue: Here is the code for my webpage: <%@ Page Language="C#" AutoEve ...
Issue with Bootstrap 5 Navbar Collapse Functionality The navbar collapse button is not working on my PC. The button appears but when clicked, the navbar does not show up. Surprisingly, when I test the code on Codeply (without linking to Bootstrap 5 and ot ...
Require a small space between the middle div and the two on each side. The middle bar should have a fixed width. Here is my attempt so far, but it seems messy: <!DOCTYPE html> <html> <head> <style> #container { width: auto; ...
Struggling to come up with a JavaScript function to swap webpage content using .style.display = "none" or "block"? The challenge lies in dealing with multiple divs each with different IDs. The goal is to dynamically change content upon button click without ...
http://jsfiddle.net/nkesh7e0/1/ enter code here I recently experimented with jquery ui resizable and created an example in the provided fiddle link. However, I encountered an issue with the positioning of the anchors. I desire for the anchors to be posi ...
I'm facing a challenge with a specific scenario: I have an element that utilizes a clip path to hide its content. This clip path is meant for an animation later on, where the content will be revealed. However, there is another element nested inside th ...
I am trying to format an email signature using a table, but I am facing an issue with how it appears on mobile devices. On mobile screens, the text gets compressed and I want the second image to be displayed below the first one along with the text. While ...
Can someone help me with this issue? I am currently developing a website with multiple pages. One of the pages contains a form that includes AngularJS functionality. After submitting the form, a second page is displayed to confirm the submission. If there ...
Despite the numerous questions on this topic, none provide a suitable answer. In this scenario, the overflow hidden property is applied to the parent div. The goal is to display only the child elements that are fully visible within this container. In the ...
Currently, I am facing a challenge with an HTML form used to update personal details in my workplace's database system. The form includes a feature that allows users to upload a picture of the person they are editing. However, I am trying to enhance t ...
Hello, I need help with printing HTML code, specifically an iframe. When I try to add my HTML iframe code, it only prints as plain text. I want to be able to see the actual iframe with its content displayed. Thank you. <script> const messages = [&apo ...
Dealing with Angular in this situation, my goal is to have an image or video displayed inside a tooltip when hovering over specific content. However, there seems to be a flickering effect before the image renders, making the transition less smooth compared ...
I am facing a challenge with a CSS-only drop-down menu where the top main menu item loses its highlight when I move the cursor over the sub-menu items. You can view the menu in action here: . For example, if you hover over "Kids" and then move your cursor ...
Hello, I am currently working on incorporating a color scale into my heat map using the d3.schemeRdYlBu color scheme. However, I am facing challenges in getting it to work properly as it only displays black at the moment. While I have also implemented a ...