I have been trying to figure this out for a while,
I have a page with an element that has a position:fixed; It is positioned to top:0; and left:0; but when you scroll the page, it appears to scroll and dosent remain in the fixed position. If you use the "inspect element" feature on Safari or Chrome it highlights the element as if it is still in the fixed position.
I had originally thought it may be something to do with the fact that the page uses ajax to load content from a database and then uses an infinite scroll to keep loading content as you scroll.
You can view the page at: http://www.davidmcmenemy.com/bwg_shop/index.php
Any help would be great!
Thank you,
David
Your assumption about ajax is right:
Your question is maybe a duplicate of:
Position Fixed in Chrome
Answer:
chrome considers that the viewport of an element added to the DOM after the page is loaded (for instance, using jQuery.load()) is restricted to the containing div of this element.
Quote: https://stackoverflow.com/a/10849618
Try loading your site without javascript and the navigation will keep its position.
#Oleg Mikheev: Behaviour only occurs in Safari and Chrome. (should be a comment)
Related
I am looking for a CSS solution to implement the exact behavior of "overscroll-behavior: contain" but for when the target element has no overflow.
I have a page with a pop-in sidebar/menu that, on mobile, takes up 100vw and 100vh (minus bottom navigation bar) and does not overflow (there is not enough content to need scrollbars). Currently when this sidebar is open on mobile, if the user tries to scroll it, the main page in the background scrolls, which in this app can result in unwanted database calls due to lazy loading/infinite scroll.
Here is a minimal codesandbox demo:
On line 55 of demo.js I have added the overscrollBehavior: "contain" property to the JSS, but as you can see, it does not contain the scroll chain, unless you shrink the vertical height of the browser to force the content of the sidebar to overflow first. (On Chrome the overscrollBehavior seemed to have the expected behavior in the codesandbox editor, but not when popped out in its own window.)
Surely there is a CSS solution to get this behaviour without the element having to be scrollbable first?
Interestingly, on Firefox at least, if you shrink the vertical height to force scroll on the side bar, once you resize the browser back to normal, the overscroll-behavior property continues containing the scroll chain until you refresh the page, which is the behaviour I'm looking for, though obviously on initial page load.
Here is a simple codepen showing the difference in overscroll-behavior for elements which do and do not overflow, if it's not already clear. I also found another post on the CSS Tricks forum from 2018 of someone asking about this behaviour, but with no solution.
I saw online that there were a couple of bugs related to position: fixed and Mobile Safari but I could'nt find any solution to my problem so far.
I have a div with overflow: auto and inside I have a position: fixed element. On desktop, Android, Chrome and Firefox, it works great but when I try to do the same on Safari on an IPhone, the behaviour is completely different and my app is not working.
The position: fixed element is a popup and I want it to take the whole page. Technically in safari it does take the whole page but I can only see part of my popup that is directly over the overflow: auto element. Everything outside the div is transparent. I say technically because the whole popup is still on top of everything but I cannot see it. I can still interact with it though.
I tried to use position: absolute but i my case it's not a viable option since the first element is inside another position relative ou absolute element and it's not goind to do the same thing.
The only option that a can see is to alter the overflow value when the popup is displayed and change it back when I close it.
Is there anything that I missed?
the sticky positioning support in CSS is very nice, but with glitches!
I am using position: sticky on a two-column layout. I have a select dropdown in the section that is set to be sticky, when page is scrolled, the select in the sticky-positioned div renders way off its place, outside the div, where it would've appeared originally without any scrolling. Here is the screenshot:
when I click anywhere to close the dropdown, and then open it again, it renders fine in the correct place. This is happening on Chrome and Firefox but not in Safari.
Here's a jsfiddle with the issue replicated. Before opening the dropdown, scroll down a bit, and then click on the select.
Does anyone know a solution to this?
After looking at your example, this appears to be an artifact of the OS rendering <select> elements and not the browser. I'd suggest filing a bug report for Chrome and Firefox, as those are the browsers you reported it in (I've confirmed it in Chrome 59 on Debian-based Linux).
I'm developing a website in hebrew, and everything is fine in Chrome and Firefox (as expected), but I have an issue with IE.
When I place
direction:RTL;
unicode-bidi:embed;
the whole page gets shifted to the right, and a horizontal scrollbar appears.
On initial load of the page, IE loads it scrolled to the right side, so it looks good (no need for manual scrolling), but the horizontal scrollbar is there.
All the other elements are placed correctly and I can't find the issue. There is no element that would overflow outside the main wrapper, and the scrollbar is there only if direction:RTL is placed.
I can notice that the scrollbar appears near the end of the loading, but I don't know if there is some way to step through the loading of the page (something like breakpoint/debug/step).
I tested it on 3 different computers (IE8/XP, IE8/Win7, IE9/Win7, and also with http://netrenderer.com )
Some help/guidance would be greatly appreciated.
You can check it at:
http://southbeachsmoke.co.il/
http://southbeachsmoke.co.il/products/category/1
I have a div and an iframe on the page
the div has
z-index: 0;
the iframe has its content with a popup having a z-index of 1000
z-index: 1000;
However, the div still overshadows the popup in IE (but works fine in Firefox).
Does anyone know what I can do?
Explorer Z-index bug
In general, http://www.quirksmode.org/ is an excellent reference for this sort of thing.
Which version of IE?
I'm no javascript guru, but I think hiding the div when the popup pops might accomplish what you need.
I've had to work with divs and iframes when creating a javascript menu that should show overtop dropdown boxes and listboxes -- other menu implementations just hide these items whose default behavior in IE6 is to show on top of any DIV, no matter the z-index.
I face the same problem. The problem in my case is that the content in the iframe is not controlled by IE directly, but by Acrobat as it is a pdf file. You can try to show the iframe without the content, in which case the popup displays normally. For some reason IE is not able to control the z-index for external helpers.
It was tested with IE7
Without seeing your code, it's difficult to determine the problem. But it's worth noting that z-index only works when the element has been positioned (e.g. position: absolute;), so perhaps that could be an issue?
There's a good article on CSS Z-index from the Mozilla Developer Center.
Without seeing a code snippet, it's hard to determine what the issue is. You may want to try appending an iframe under your popup that is the same size as your popup. With IE7 if you render the iframed popup after the other iframe has already loaded you should be able to cover up elements that are beneath. I believe some JS calendars and some lightbox/thickbox code does this if you are looking for examples.
never set your z-index to anything bellow 1 enless you want to hide it. I'm not sure about 7.0 but older versions of IE I've had issues with doing that. IE doesn't like z-index that much. Also check your positioning. Positioning may be your issue. sorry, i don't have enough info to help you further.