I have a simple question. I am currently designing a mobile version of a page, and we are trying to keep the "snag it" yellow button fixed at the bottom. However, the 'position: fixed' property is not working as expected; it's behaving like 'position: absolute' instead.
The specific page I am working on is:
Thank you, Luiz
The problem here is related to the .content-container wrapper class, which includes a CSS rule of
webkit-transform: translate3d(0,0,0)fixed element to behave as if it were absolutely positioned. Below is an example that demonstrates the difference between having a fixed element inside a transformed div versus having it outside.
.rotate {
transform: rotate(30deg);
background: blue;
width: 300px;
height: 300px;
margin: 0 auto;
}
.fixed {
position: fixed;
background: red;
padding: 10px;
color: white;
top: 50px;
}<div class="rotate">
<div class="fixed"> I am fixed inside a rotated div.</div>
</div>
<div class="fixed"> I am fixed outside a rotated div.</div>To resolve this issue, you will need to eliminate the transform3d declaration from the .content-container class.
Curious minds may be wondering if the behavior described is a result of a browser bug. Interestingly enough, it seems to align with current W3C specifications. Initially, there was inconsistency across different browsers, with some functioning as expected while others followed what seemed like counterintuitive W3C rules. The reasoning behind this change remains ambiguous - whether it's intentional logic, a byproduct of implementation challenges, or simply an oversight.
Furthermore, the use of position: fixed can be disrupted not only by transform, but also by applying the filter and perspective properties to any ancestor element. More information on this issue can be found here.
For additional insights into this matter, refer to the following sources: https://www.w3.org/TR/css-transforms-1/#propdef-transform, https://www.w3.org/Bugs/Public/show_bug.cgi?id=16328, and https://github.com/w3c/csswg-drafts/issues/913.
The issue I encountered stemmed from combining a css transform with overflow: auto; on the parent element.
To resolve it, I introduced a new child element and transferred the overflow property to that element instead.
This separation of properties successfully resolved the problem at hand.
This problem seems to be specific to mobile devices. I've faced this issue in the past as well. Mobile browsers, especially older ones, tend to limit the use of fixed positioning due to its tendency to occupy a large amount of screen space.
I'm currently developing a new newsletter template, and I've encountered an issue with background images not displaying properly in Outlook. The code below illustrates the desired layout: <table style="width: 600px;" align="cent ...
Is there a way to prevent a div from moving when scrolling up or down without using the position:fixed property? When an element is fixed, the scroll bar disappears making it impossible to reach the element by scrolling. div{ position:fixed; top:1 ...
I'm currently utilizing Zurb Foundation within a rails project. My goal is to structure a basic page that consists of a table, text field, and a couple of buttons. However, I am facing a significant gap on the left side of my content, causing the rig ...
Can a div with absolute position be resized? I need this pink modal to maintain the same width as the input and resize accordingly. This modal will be utilized in a dropdown component, so it should resize along with the input. Moreover, is using absolute ...
It's been a challenge for me to get the md-toolbar to stay in the top position. I decided to create a custom directive using the $mdSticky service in AngularJS. var app=angular.module('app',['ngMaterial']); app.controller(&apos ...
Can the transition for changing the order of the model array in ng-repeat be animated using only CSS, without using ng-animate? ...
Recently, we have been revamping an outdated product using VueJs. The original application utilized Spring Web Flow, where all the text editing information was stored in a string. After some research, I discovered that adding white-space: pre-line; as a ...
Check out my rotating image example on hover in React here This effect utilizes scale(), rotate(), and transition properties to create an animated rotation when hovering over the parent element. Additionally, overflow: hidden is applied to the parent elem ...
I have implemented a unique CSS solution to showcase a five-star rating system on my website. The method I followed can be found at . While this technique works flawlessly in some sections of my website, it strangely fails in others. Could this be due to c ...
On a dynamically loaded page via pjax (except in IE), there are several links at the bottom. Whenever one of these hyperlinks is clicked, the page scrolls to the top while still loading. Although I am okay with this behavior, I'm curious if it' ...
My goal is to create a switch function where clicking the "on" button changes its CSS, and if the user then clicks on the "off" button, the CSS returns to normal. I also need the switch to default to the "on" position, but my attempts so far have been unsu ...
I am looking to create a layout with a variable number of columns using row span. Specifically, I want 3 columns on XS, 2 columns on SM (with the first 2 columns stacked on top of each other), and 3 columns on LG. I am unsure how to make the row span respo ...
Here's the code I'm working with: .frm-find-people table td:nth-child(1) { padding: 5px 15px; width: 100px } .frm-find-people table td:nth-child(2) { border: 1px solid red; } <form class="frm-find-people"> <table> ...
Struggling to craft a clean layout with an upvote button, I encountered an issue where the textarea appears to overlap with the image. Below is my sample code snippet: .my-component-row { display: flex; justify-content: center; align-items: center ...
Class name: var x = document.getElementsByClassName("intro"); CSS selector: var x = document.querySelectorAll("p.intro"); I'm a bit puzzled, are there any distinctions between the two methods or are they essentially the same? ...
Summary: When I adjust the size of a DOM element using CSS, its directive fails to acknowledge this change even with a watch on the size. Aim I have multiple custom directives (simple-graph) each containing an svg. My goal is to enlarge the one under the ...
If I am utilizing SASS and wish to incorporate a significant portion of another existing stylesheet, whether it is in SASS or CSS format, I have the option to import that particular sheet using @import, then employ @extend to apply some of its rules. Is ...
If the count is equal to zero, I want to change the color to black in the code below: if(Count === 0){ document.getElementById('value').style.color = 'black'; } return( <div className='container_new'> < ...
I have a situation similar to this: $('.inset').click(function(){ if($('.inset').is(':checked')){ $('.box-shadow').css('boxShadow','inset'); }else{ $('.box-shadow&ap ...
I am struggling with positioning a child .div containing rotating images to the right side of its parent (header) .div. I am utilizing the flexbox model for layout purposes. Despite my efforts, the solutions I have come across so far have not yielded the ...