The fixed element has the following style properties:
position: fixed;
top: 0;
right: 0;
It is supposed to remain fixed to the top-right corner, as it does on desktop browsers (Chrome, Safari).
However, on iOS Safari (16.1.1), when scrolling, the element disappears or jumps unexpectedly. After scrolling, it reappears in correct position. See video: https://drive.google.com/file/d/17UFcgFiHh8UANGJqy8S5RZjTWeqnSR3T/view?usp=sharing.
This issue only happens when element is positioned relatively to top: no issue when positioning element relatively to bottom.
The issue also happens when setting the Safari address bar to top of screen instead of bottom.
I have tried, without effect, the transform: translate3d(0px,0px,0px) hack on the fixed element and its children (iOS 9 Safari: changing an element to fixed position while scrolling won't paint until scroll stops).
The problem was due to the fixed element being a child of an absolutely positioned element. I moved the fixed element out of its parent and it fixed the problem.
Related
I display 2 graphics either side of my page content. When the browser/page width narrows these items are cropped off the screen to allow more room for the content. This is mainly
.page {
height: 100%;
min-height: 100%;
overflow-x: hidden;
overflow-y: auto;
min-width: 960px;
}
That all works fine but I have a min-width set on the .page div which wraps around all the content and is the next element after the opening body tag. I've just realised that when the browser width goes below the min-width the vertical scroll bar disappears from the side of the page.
Here's a CodePen of the issue: https://codepen.io/moy/pen/oemBEN
Presumably that is because the body is now in view but the .page element remains at it's set min-width ...makes sense.
However, the reason I set the overflow on the .page element in the first place is because of an issue I was having when it was set on the body. An issue I thought I'd resolved by applying the code this way.
If I move the following code to the body:
overflow-x: hidden;
overflow-y: auto;
All appears to work as I'd like it to. The items either side of the content area are cropped and the vertical scroll bar remains in view when the content is long enough in Chrome + FireFox on Mac. If I check the page in Safari (Mac) or IE on Windows the side items are't cropped correctly.
If you scale the browser down and then click on the background and drag right you can reveal the cropped area of the page and it looks messy!
Is there a way around this? Or will I need to make do with the vertical scroll bar hiding?
You can use the flex layout for this:
https://codepen.io/anon/pen/EvrXmG
The .container element starts the flex layout.
The .img elements have a width and flex-basis set to it and are not allowed to grow but to shrink, resulting in a "max-width".
The .wrap elements have a width and flex-basis set to it and is not allowed to shrink but to grow, resulting in a "min-width".
If the page gets bigger the .img elements stay at the max size but the content acquires all free space.
if the page gets smaller, the content stays at its minimal width ant the image elements start to disappear.
This solution is probably not safe for old browsers but one of the easiest solutions for modern browsers Browser compatibility.
I am trying to fit a progress bar into the parent, which is oddly difficult. It is done on a Jot form, but with access to custom CSS and so on, which I have utilized a lot (that could have created the problem I guess).
The progress bar is positioned fixed at the top, and is in the parent element div.form-all as the very first and second element. I have tried all the common suggestions on here about box-sizing and so on, but nothing seems to work.
My suspicion is that it is because the parent element does not have an explicitly stated width, as this fixes the problem monumentally (but breaks the responsiveness, as it goes from ≈36% width to 100% on small screens).
Any help would be greatly appreciated. The actual form can be found here, at Jot form, in Danish:
All added custom CSS should be visible by inspecting the elements, but I will mention that it has worked before.
The div containing the progress div has the following css-attributes:
.progressBarContainer.fixed {
position: absolute;
top: 0;
width: inherit;
background: #FFF;
z-index: 9999;}
The parent has by Jotform-coding the following relevant attributes, with no position attribute:
.form-all {
width: 690px;
width: 100%;
max-width: 690px;}
Thank you in advance, Kris.
Absolute Position Solution:
You said you are using position: fixed, but this won't inherit the width of the parent. You need to change .progressBarContainer.fixed to position: absolute, and then the form parent, .form-all, add position: relative.
This will then set the width of the progress bar to be the same as the form.
Fixed Position Solution:
There are a number of ways you can keep the progress bar sticky on the screen. You will either have to explicitly state the max-width of the progress bar in the CSS, or CSS with a JavaScript solution. The simple CSS solution would be to keep position: fixed assigned to .progressBarContainer.fixed, but then you have to specify max-width: 690px to .progressBarContainer.fixed.
Its position is fixed that's why it gets the whole screen's width when it's set to 100% width. See here for reference
Assuming that you want the progress bar to stick to the top and since the container element .form-all has a max-width property of 690px try applying it to the progress bar element as well to prevent it from expanding to 100% of the screen width.
Otherwise simply remove the fixed positioning from the progress bar.
I have a Bootstrap Navbar with two menu elements aligned to the right:
The point is that I would like those elements to be aligned to the inferior border of the bar and I would prefer using absolute positioning rather than playing with their padding and margins. As you can see in the Firebug screenshot below those menu items are childs of a div that covers the precise area where I would like to position them (for those not familiar with firebug the blueish area corresponds to the browser position of the underlined code):
Now, my question is, why adding the css .nav.navbar-nav.navbar-right{ position: absolute; bottom: 0px; right: 0px; width: 230px; } results in the menu elements moving further to the right of the area of its parent? I would expect them only to move down, not right. (Result shown below with firebug still shadowing its parent position).
Disclaimer: As you can check below (another firebug screenshot) .nav.navbar-nav.navbar-right corresponds indeed to the child of the previously underlined div:
Bonus: Any help moving down these menu elements without using padding and margins and keeping them within their parent's area will be appreciated.
An absolute positioned element is generally not influenced by any other element. To get it working, give the parent element a position: relative;.
.navbar-collapse {
position: relative;
}
Then the absolute positioned element is dependent on its parent element.
I have an absolute positioned element inside a div that is hidden (opacity:0), when hovering I set the opacity to 1. When the div ends the transition part of the content moves 1px down and the absolute positioned elements get 1px narrower.
This only happens on Google Chrome.
I made a small video to show what's happening
And this git to show the markup and styles: https://gist.github.com/lucasfercunha/9932819
Unfortunately I wasn't able to reproduce the issue in a small JSFiddle.
I found how to fix div position using jQuery.
Here is an example.
Can I achieve same effect using css?
UPD: I have seen this solution. I want also horizontal window scrollbar to appear, if fixed element does not fit the window.
You can achieve the same effect without the cool whizz-bangs and animations with position: fixed. The fixed element will then just scroll along.
As for horizontal scrollbar when content doesn't fit the window, just define width: 100% and overflow-x: scroll for the fixed element .