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 :)
Related
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)?
I haven't asked too many CSS questions on here, so here it goes.
Let's say I have a page:
<body>
<div id="wrap">//page containment, etc.. goes here..</div>
<img class="custom-bg" src="example.jpg" />
</body>
Then I write some CSS for the image in particular:
#wrap {
z-index: 100;
}
img.custom-bg {
position: absolute;
top: 1000px;
left: 50%;
margin-left: -960px //the image is 1290px wide
z-index: 0;
}
If you can't tell by now, yes, I'm trying to create a background image using absolute positioning. Yes, I know, I can just set the image as a background to the body tag and use positioning to place it, but for the sake of this question, let's say that's not an option to me.
The issue at hand is the appearance of horizontal scroll bars. Google is full of examples with people turning off overflow and other things, but I'm curious if anyone has been able to find/create a definite approach to removing horizontal scroll bars when performing something like the above. An absolute image, that lives happily on it's own. Centered. And not "attached" to the window... Thus eliminating the need for the browser to let users know there's an image that's really big, and that they just have to see it by scrolling horizontally a little bit.
Any insight would be awesome. I included as little code as possible so that people who may search for this example and are new to web dev, may have an easy time understanding how to work through their problem regarding absolute positioning and horizontal scrolling.
I may have missed the point here, but why don't you just use position:fixed instead?
http://jsfiddle.net/shanethehat/7MetS/
I'm working on a photography site with a lot of images and they have no fixed height and width as I want this site to be 100% fluid: how do you work around the ugly Chrome repaint of the images? (i.e. Images are first displayed at zero height and then rescaled to their final size moving around the entire layout)
I've tried pretty much everything and my last option is to hide the image repaint with a black div and then set its opacity to 0 when images are finished loading (BTW, I've tried this with a (document).ready call but it seems too soon: how would you do it?)
Specify your image's height and width attribute / its dimensions.
<img src="img.jpg" width="125" height="60" alt="My First Photograph ever">
This helps the browser avoid a second pass to layout your page and it optimizes page load as well! :)
Chrome (or any browser really) cannot avoid this 'repainting', since they don't know on forehand what size your images will be.
Thus, you will need to explicitly specify the sizes of your images, either in the image width and height properties itself, or via CSS.
I know I am more than two years late, but how about the practice suggested here?
<div class="embed-container ratio-16-9">
<img src="imgage.jpg"/>
</div>
.embed-container {
position: relative;
height: 0;
overflow: hidden;
background-color:black;
}
.ratio-16-9{
padding-bottom:56.25%; /* 9/16*100 */
}
.ratio-4-3{
padding-bottom:75%; /* 3/4*100 */
}
.ratio-1-1{
padding-bottom:100%; /* ... */
Also, an important remark from the comments section to pay attention to, and improve upon the original technique:
Nice trick. However, if I was you, I would replace the "img" tag with
a background image on your div (and background-size: cover or
contain). That would avoid you the position trick, the overflow trick,
and a lot of work for the browser.
I hope someone will find this useful.
It’s hard to test, but you could try setting width/height in CSS
img {display: block; width: 100%; height: auto;}
if you want the images to be full-width. This might prevent a full-page repaint, but of course there’ll be some repaint regardless as images load. You can also investigate what’s happening with Chrome’s --show-paint-rects
Hope that helps
I have this code, which is behaving differently in firefox vs chrome.
<h2>Presenting
<span style="font-weight:bold">Analytics by </span>
<div class="fi_logo"><img src="IMAGEURL" /></div>
</h2>
the class fi_logo referenced above is :
.fi_logo {
min-width: 35px;
height: 35px;
margin-left: 40px;
position: absolute;
top:-5px;
left: 262px;
float:right;
}
In firefox, there is an offset caused by margin-left in fi_logo between the image and the text(in h2). If i dont add the margin-left, then the image overlaps the text in chrome.
So, in short, if i add the margin-left property, it works in chrome, whereas it causes a large offset in firefox. Any suggestions on how to solve this?
Here it is: http://jsfiddle.net/bikerabhinav/mpL79/2/
Use combination of position relative and absolute.
Also, do not use div inside h2 - bad markup
Maybe if you set .fi_logo display:block
I think, your problem is with specific browser version.
I checked it in FF 3.6.2, which return same result like Chrome
Well it sounds like you still haven't sorted this out so I will make a little more commentary.
I cannot say exactly what is causing the browser inconsistencies without doing a bunch of trial and error, but I think that the way to fix it is to rethink the way you are positioning the image.
It seems awful convoluted to be positioning the img absolutely, floating it, and adding a left margin. Given all of that it is unclear what precisely you are even trying to accomplish with this code.
If you edit your question to describe how you want the image positioned, I (or someone else) would be more than happy to recommend a good approach
Your html is invalid. You cannot have a div inside a heading. I also question the float and absolute positioning on the same element. I also wonder if you are using a doctype.
Your image tag inside the div is not closed properly, and in the css the class definition is wrong; the class is defined by a dot (.);
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>