Changing position attributes on fixed divs may not function properly on Android devices

Utilizing CSS transitions, I've successfully managed to make divs move, but unfortunately, this functionality does not work on Android devices.

When the div is set to position:fixed, it remains static without any movement.

Here is the original code snippet for the div:

header {
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    height: 50px;
    width: 100%;
    z-index: 4;
    float: left;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
}

This is the class that I add to initiate the movement:

.show-left-menu {
    transform: translate(79%, 0);
    -ms-transform: translate(79%, 0);
    -webkit-transform: translate(79%, 0);
}

Switching to position:relative allows the movement to work, but since it's a sticky header, it must be fixed.

Answer №1

There is a known bug in the Android system, which persists up to version 4.0 and is only resolved in versions 4.1 and above.

In Summary:

On Android devices, the following code will not function properly:

<div class="side-menu"></div>

.side-menu {
  position: fixed;
  left: -70px;
}
.side-menu.show {
  transform: translateX(70px);
}

For a proper functioning alternative that won't impact other browsers:

<div class="side-menu-fixer">
  <div class="side-menu"></div>
</div>

.side-menu-fixer {
  position: fixed;
}
.side-menu {
  position: absolute;
  left: -70px;
}
.side-menu.show {
  transform: translateX(70px);
}

Explanation: In Android 4.0, there is a bug that prevents the use of transform CSS on elements with position: fixed. To address this issue, the suggestion is to wrap the fixed position element in another div with position: fixed, and then change the position type of the original element to position: absolute.

This solution was initially proposed by rpsep2, and has been shared here as an answer to help others facing the same challenge on Android devices. Special thanks to rpsep2 for providing this workaround!

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

Using JavaScript to grab an entire div containing an SVG element

I am looking to capture an entire div as an image and save it locally as proof. Despite reading numerous articles on converting SVG to image or div to image, I have encountered challenges in achieving the desired result. Several attempts with JavaScript l ...

Tips for setting one image as the background for an entire page

Take a look at the web template image linked below: URL - https://ibb.co/cD3iH8 I want to utilize the abstract design image above as the background for an entire page. Please provide guidance on the most effective way to accomplish this task. ...

Apply specific margins to every second element in media queries using the margins that were previously set for every third element

Looking to adjust the margin for every second element instead of every third when using media queries. .title:nth-child(3n+3) {margin-right:0 !important} @media screen and (max-width:1160px) and (min-width:900px){ .title:nth-child(2n+2) {margin-right:0 ! ...

There seems to be a problem with the background repeating space in the CSS

body { background-image: url("https://source.unsplash.com/user/c_v_r/100x100"); background-size: 100px; background-repeat: space; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA- ...

Easily move elements using a jQuery click animation

Having trouble animating a div's top position by -130px to move it off screen? Can't figure out why it's not working? I'm fairly new to jQuery/Javascript. I have a button/hyperlink with the ID #NavShrink. When clicked, I want the div # ...

Embed one module within another module and utilize the controller from the embedded module

I am attempting to create a module and inject it into the main module. Then, I want to inject the controller into the injected module but am facing issues. In my index.html file: <html ng-app="MenuApp"> <head> </head> <body> <d ...

Guide on extracting a JavaScript string from a URL using Django

How can I extract "things" from the JavaScript URL "/people/things/" without any unnecessary characters? I've attempted inefficient methods like iteration, but struggle with removing the undesired parts of the string, leading to slow performance. Th ...

Repetitive data in a list with AngularJS

There's probably a simple solution to this: I have some data in a controller, and depending on whether an item is selected or not, it should display different HTML. If the item is selected, the HTML should be: <li> <a href="#"><s ...

Instructions on how to add an ExternalLink to a webpage linking back to the previous page

I'm in the process of creating an error page for my app, and I'm trying to figure out how to add a Wicket ExternalLink that takes users back to the previous page. I believe I need to store the parameters or entire URL of the last visited page, b ...

Switching up the styles in PHP-embedded HTML by tweaking the CSS

I used PHP to create HTML elements by echoing them out, but I ran into an issue when trying to change the CSS for those HTML elements. Can you help me figure out how to do this? The PHP } else { include("steamauth/SteamCo ...

How come jQuery is retaining the original DOM element classes even after I have modified them using jQuery?

Here is the code snippet I am working on: $(".drop-down-arrow-open i").click(function(){ console.log("The click function for .drop-down-arrow-open is triggered even when it is closed"); let thisParent = $(this).closest(".projects-container").find(".need ...

What is the best way to position the label above the input text in a Material UI TextField component with a Start Adornment?

Struggling to figure out the right Material UI CSS class to style a reusable TextField component? You're not alone. Despite tinkering with InputLabelProps (specifically the shrink class), I can't seem to get it right. Here's the code snippet ...

Is there a way to trigger a function for both a left and middle click at the same time?

Check out this code snippet: $('a').on('click', function(){ myfunc($(this)); }); function myfunc(el){ console.log('Either left or middle click clicked on the link'); } a{ cursor: pointer; } <script src="https://aj ...

Creating a loading mask for a section of a webpage using angularjs

How can I implement a loading mask/image for a $http request that loads data for a <select> tag on my webpage? I want the loading mask/image to only cover the specific section of the page where the data is being loaded. Here's the HTML code: & ...

Learn the trick to make this floating icon descend gracefully and stick around!

I'm trying to create a scrolling effect for icons on my website where they stay fixed after scrolling down a certain number of pixels. I've managed to make the header fixed after scrolling, but I'm unsure how to achieve this specific effect. ...

Conceal and reposition divs based on device with Bootstrap's responsive utilities

Utilizing Bootstrap to design a layout that adapts to desktop, tablet, and mobile screens. The desired output is depicted below: In order to achieve this, three divs were created: <div class="row"> <div class="col-md-3">Text</div> & ...

Tips for showing nested JSON data in a PrimeNG table within Angular version 7

I am struggling to display nested json data in a PrimeNG table. When I retrieve the data using an HTTP service, it appears as [object][object] when displayed directly in the table. What I want is to show the nested json data with keys and values separated ...

Ways to invoke a JavaScript function within a child window that is already open

I am working on a project where I have a main html file. In this file, I want the user to click on something that will trigger a new window or tab to open. This new window/tab should display the dynamically generated content of a hidden div in the main htm ...

The radio button default selection is checked, but the desired styles are not being applied

My webpage features two radio buttons, "No" and "Yes," with the default selection being "No." I have implemented CSS styles for the checked elements, but they only work once physically selected. My goal is to apply these styles immediately on page load wit ...

What is the best placement for video content in a website development project?

Storing images in a folder named images is recommended for better website organization and SEO benefits. But what about local video content? Should it go in a folder labeled videos? ...