I've just noticed that Firefox 12 and 13 won't show horizontal bar when the page gets x overflow. I tried to make CSS declaration:
html {
overflow-x: scroll !important;
}
but it doesn't help.
Any ideas? Thanks
The line in the jquery-ui style sheet that causes this is:
.ui-helper-hidden-accessible { .position: absolute; left: -99999999px; }
If you change it to the following you should see your scrollbars again:
.ui-helper-hidden-accessible { /*.position: absolute; */ left: -99999999px; }
Although I have no clue what so ever what other effects this change might have. I don't know what that element is used for.
Make sure you have not made a mistake elsewhere, try it in another browser first to make sure then strip all the CSS and just replace it with html {
overflow-x: scroll !important;
} and see if it works, if you did anything with changing the width of the page it would change the effect on the page.
I assume, that there is actually some overflow to display?
Same issue. Page looks fine in chrome, IE and FF11. I can make it go away by disabling http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css (via WebDeveloper toolbar). Can't find a root cause yet though.
I don't think you want to do this...
.ui-helper-hidden-accessible { /*.position: absolute; */ left: -99999999px; }
this will cause these elements to show on screen, when they are supposed to be positioned off to the left. As these elements probably don't always exist you'll be putting a "bug in the bank" for later on, one day you'll get a load of elements showing up on your site that should be invisible. Which will be really hard to debug!
This issue looks like it might be related to this https://bugzilla.mozilla.org/show_bug.cgi?id=749935 large number issue, you could try reducing the size of the number (-99999999)?
Related
The casper theme is great. But I'd like to make a few tweaks.
HTML layout and css trickery is not something I do. So here we go...
I'd like to fix the position of the site header so that scrolling the articles glides neatly over top.
Simply changing the css for position:fixed on the site-header class almost works, in that it stays put. But doing that changes the layout in a rather ugly way. i.e. It moves the site header left and it all the posts on the main page shift up over the top of the title so when you first load the page you can't see it. This is unexpected for someone who's not terribly savvy beyond very basic css.
I just set this up myself. Two small tweaks are needed. On site-header, set a z-index (I picked 1000) and set width: 100%. Then, add an appropriate amount of padding-top to site-main. The best way to add this padding would be JS (dynamically check the outer-height of site-header) but if you are reasonably sure your header won't shift sizes, go ahead and hard-code it.
For v4 of casper, add this to the .gh-head class. You can either modify the theme files or do code injection. The sticky property is supported for 95+% of users. Check here for a comprehensive list. The high z-index takes care of content not going over your header when scrolling.
.gh-head {
position: -webkit-sticky; /* Older Safari browsers */
position: sticky; /* Most other modern browsers including Safari */
top: 0;
z-index: 4000;
}
I have this interface concept and I just don't know if it's possible. It's kinda hard to explain so I sketched it out.
I think I know how to accomplish some behaviour:
<header> position: fixed;
<nav> position: sticky (with a polyfill)
<section class="content box"> --- no idea really
I was hoping there would be some kind of way to add a clip-path to the content box that I could position: fixed. So that when the user scrolls the content box would peep trhough the area which was defined by the clip-path.
Looked into quite some options and thought I'd found a solution in webkit-mask-attachment but that property was nuked.
Any help is welcome. I prefer a pure CSS solution which has to work responsively.
Cheers,
Bart!
PS. I have thought of a javascript solution where I monitor the scroll offset and change the class of <header> in which I set a height and overflow: hidden. But I really would prefer it if there was a CSS solution.
UPDATE 1
I'm on to something. Working in Firefox only since I'm using position: sticky and haven't bothered polyfilling it. It works when you scroll.... but if you scroll down and wait a couple of seconds somehow stuff gets repositioned or redrawn and the red header is shown fully again.
Any idea why this happens?
Try out this pen on Firefox: http://codepen.io/anon/pen/GJBxYw
Ah, found it! Strange behaviour. In order to hide the svg object I set the css properties for svg to:
svg { display: none; }
Now somehow when scrolling this doesn't matter. But when you scroll the css rule kicks in. So in order to hide the svg object I changed the rule to:
svg {
position: fixed;
z-index: -1;
top: 0;
height: 0;
width: 0;
}
And that seems to work. Don't know if there are better ways to go about hiding the svg object?
Try out this updated pen on Firefox: http://codepen.io/anon/pen/GJBxYw
Haven't done any serious FED since XHTML so I'm quite proud of myself, go easy on me :)
This question might have been asked many times but still there are many factors which I think affect it to make the solution work
I have a site here
http://www.radioali.com/valy-mikham-toro-bebinam-video_51e244dc3.html
The header of the site is static. If you notice scrolling up the page, everything scrolls properly except the video. It never goes behind the header div.
It is a problem with flash player and there are workarounds for it by using wmode. I have tried it setting opaque and transparent but with no result.
Can someone please suggest me how to make the flash object behave properly and scroll behind the header div.
Just change the z-index to 0
So
#video-wrapper {
position: relative;
z-index: 4999;
}
will be
#video-wrapper {
position: relative;
z-index: 0;
}
When scrolling on a website I've built, using the CSS property position: fixed works as expected to keep a navigation bar at the very top of the page.
In Chrome, however, if you use the links in the navigation bar it sometimes disappears. Usually, the item you've clicked on is still visible, but not always. Sometimes the entire thing disappears. Moving the mouse around brings back part of the element, and scrolling with the scroll wheel or arrow keys just one click brings the element back. You can see it happening (intermittently) on https://nikeplusphp.charanj.it - you might have to click on a few of the navigation the links a few times to see it happen.
I've also tried playing with the z-index and the visibility/display type but with no luck.
I came across this question but the fix didn't work for me at all. Seems to be a webkit issue as IE and Firefox work just fine.
Is this a known issue or is there a fix to keep fixed elements visible?
Update:
Only effects elements that have top: 0;, I tried bottom: 0; and that works as expected.
Add -webkit-transform: translateZ(0) to the position: fixed element. This forces Chrome to use hardware acceleration to continuously paint the fixed element and avoid this bizarre behavior.
I created a Chrome bug for this https://bugs.chromium.org/p/chromium/issues/detail?id=288747. Please star it so this can get some attention.
This fixes it for me:
html, body {height:100%;overflow:auto}
I was having the same issue with Chrome, it seems to be a bug that occurs when there is too much going on inside the page, I was able to fix it by adding the following transform code to the fixed position element, (transform: translateZ(0);-webkit-transform: translateZ(0);) that forces the browser to use hardware acceleration to access the device’s graphical processing unit (GPU) to make pixels fly. Web applications, on the other hand, run in the context of the browser, which lets the software do most (if not all) of the rendering, resulting in less horsepower for transitions. But the Web has been catching up, and most browser vendors now provide graphical hardware acceleration by means of particular CSS rules.
Using -webkit-transform: translate3d(0,0,0); will kick the GPU into action for the CSS transitions, making them smoother (higher FPS).
Note: translate3d(0,0,0) does nothing in terms of what you see. it moves the object by 0px in x,y and z axis. It's only a technique to force the hardware acceleration.
#element {
position: fixed;
background: white;
border-bottom: 2px solid #eaeaea;
width: 100%;
left: 0;
top: 0;
z-index: 9994;
height: 80px;
/* MAGIC HAPPENS HERE */
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
The options above were not working for me until I mixed two of the solutions provided.
By adding the following to the fixed element, it worked. Basically z-index was also needed for me:
-webkit-transform: translateZ(0);
z-index: 1000;
This is a webkit issue that has yet to be resolved, oddly making the jump with JavaScript, rather than using the # url value, doesn't cause the problem. To overcome the issue, I supplied a JavaScript version that takes the anchor value and finds the absolute position of the element with that ID and jump to that:
var elements = document.getElementsByTagName('a');
for(var i = 1; i < elements.length; i++) {
elements[i].onclick = function() {
var hash = this.hash.substr(1),
elementTop = document.getElementById(hash).offsetTop;
window.scrollTo(0, elementTop + 125);
window.location.hash = '';
return false;
}
}
I could refine this further and make it is that only it only looks for links beginning with a #, rather than ever a tag it finds.
If it don't work after adding
-webkit-transform: translateZ(0)
than also add
user-scalable=no
on viewport meta
source here
it worked for me
I encountered the same issue in a different case. It was because of usage of same id in multiple place. For example i used #full 2 divs.
It seems that mozilla and I.E. supports usage of same id in multiple cases. But chrome doesnot. It reacted with fixed element disappering in my case.
Just removing the id's solved the problem.
None of them worked for me except calling the modal via javascript
Click me to open MyModal
<script>
function show_modal()
{
MyModal.style.display = 'block';
}
</script>
other than this, none of the solutions above solved my problem.
This Worked for me . Add Overflow property to your top most container which can be Div or Form etc.
div, form
{
overflow:visible;
}
The same issue happened to me. For the main page of the website. I made a fixed header and Used an image for the front poster. Everything worked fine. But the moment I changed the opacity of the poster image my header with position: fixed; got disappeared. It was present there in the chrome developer tools. But was totally transparent on the website.
I tried every solution from StackOverflow, W3shools, Geeke4geeks. But if one thing was fixed another thing got messed up.
So I just opened photoshop and edited the image manually. And then posted it on my website.
It worked.
But still, it won't be effective for divs under the fixed elements.
If none of the answers above worked for you, make sure you aren't a dummy like me and have overflow: hidden; set on the fixed element :(
What if none of above worked at all? simple case of sticky header + mobile side menu pushing content.
I try to find a way to avoid fixed element (sticky header) being translated but in this case nothing is a good alternative.
So as there is no workaround on scope so far there is a JS alternative that I opted for to recalculate absolute position of fixed element. See here: https://stackoverflow.com/a/21487975/2012407
In my case, I just added min-height: 100vh; to fixed element, may be that will be useful for somebody
As per the title, it seems only Chrome isn't playign along. Note that form fields cannot be clicked on which are on the left portion of the screen. This only occurs on some pages (such as the Contact page). It appears that the #left_outer div is overlaying the content. When I edit the css via Firebug or Chrome's dev toools, it works, when I edit the actual css and refresh, it does not.
Any ideas?
LINK:
Thanks!
Usually when you have set the z-index property, but things aren't working as you might expect, it is related to the position attribute.
In order for z-index to work properly, the element needs to be "positioned". This means that it must have the position attribute set to one of absolute, relative, or fixed.
Note that your element will also be positioned relative to the first ancestor that is positioned if you use position: absolute and top, left, right, bottom, etc.
Without a link to look at, it's a bit tough to see what the problem might be.
Do you have a z-index: -1; anywhere (a negative number is the key here, doesn't matter the number)?
I have found in the past this renders the container void from being interacted with.
Good luck!
Markt's answer (see first answer) is great and this is the "by definition" of the z-index property.
Chrome's specific issue are usually related to the overflow property from the top container bottom.
So, for the following:
<div class="first-container">...</div>
<div class="second-container">
<div ...>
<div class="fixed-div> some text</div>
<... /div>
</div>
And styles:
.first-container {
position:relative;
z-index: 100;
width: 100%;
height: 10%;
}
.second-container {
position:relative;
z-index: 1000;
width: 100%;
height: 90%;
overflow: auto;
}
.fixed-div {
position: fixed;
z-index: 10000;
height: 110%;
}
the following actually happens (Chrome only, firefox works as expected)
The 'fixed-div' is behind the 'first-container', even though both 'fixed-div' and its container's ('second-container') z-index value is greater than 'first-container'.
The reason for this is Chrome always enforce boundaries within a container that enforces overflow even though one of its successors might have a fixed position.
I guess you can find a twisted logic for that... I can't - since the only reason for using fixed position is to enable 'on-top-of-everything' behavior.
So bug it is...
I had a weird issue with zIndex on Chrome and I kept fiddling with the position attribute to see if anything worked. But, it didn't. Turns out, in my case, the issue was with the transform attribute. So, if you have a transform attribute in place, disable it and it should be fine. Other browsers work fine with stuff like that, but Chrome seems to play it differently.
Hope this helped you.
Google Chrome to 84.0.4147.135 (Official Build) (64-bit) 2020-02-22.
Since my last update, CSS element z-index is broken in Chrome.
Chrome added "z-index: 1;" to the BODY element.
It now wrongly displays all z-index: ?; values in the BODY child elements.
Setting the position, z-index of BODY does not solve the problem.
Changing z-index values of child elements that were already correct does not help.
I hope this issue will be fixed, it is only broken since I updated Chrome.
Chrome 84.0.4147.135 bug on www.eatme.pro/music - screen smaller than 500 px - push play - appearing bottom bar #lblBottomBarLink with z-index 5 is displayed under menu with z-index 2
(see image)
image eatme.pro/music in Chrome 84.0.4147.135 with z-index 5 under z-index 2
I know this is now resolved but posted solution didn't work for me. Here is what resolved my problem:
<act:AutoCompleteExtender ID="ace" runat="server" OnClientShown="clientShown">
</act:AutoCompleteExtender>
<script language="javascript" type="text/javascript">
function clientShown(ctl, args) {
ctl._completionListElement.style.zIndex = 99999;
}
</script>