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?
Related
Been using Animate.css to set up some whole-page animations on my site, however, I've found that mobile browsers seem to fail to recalculate the page size after the animation is over, often leaving a massive whitespace where the element began its animation onto the screen.
Basically, I have Animate.css animating entire page sized divs to slide in from the side and from the bottom, while side divs appear to not cause the bug as much, slideUp appears to leave the space at the bottom a lot. All divs are set to display: none after the animations finish.
It may be related to having overflow-y: visible; on my body.
I'm really seeing the issues on an iPad I'm testing on, Chrome eventually detects the new page size and removes the whitespace(after some delay), and Safari appears to just never figure it out.
Any ideas of hacks that may force mobile browsers to recalculate page size, or a more specific fix?
I was having the same issue but I was only animating in from the sides. Adding overflow-x: hidden; to the main div fixed this for me, so you may want to think about not using overflow-y: visible; somehow. It seems to be a bug with mobile browsers.
I've created a jsfiddle:
http://jsfiddle.net/daFalk/dx3xLgLq/2/
its all about the css styles
div.ding-wrap {
position: absolute;
}
As you can see there is an image well positioned if you open it with chrome or any other normal browser.
But if I open it with internet Explorer the image is gone! I need to change the positioning of ding-wrap to relative.
i would do so, but then my animations (not there) does not work very well. So I need the positioning absolute. How can I teach IE to take me serious?
Thanks, Falk
jiangshui gave a push in the right direction. I stopped centering via table and table-cell and used
margin: auto;
height: 100%;
for centering. Sadly, always if I googled vertical centering, everywhere I read only about the first method because the auto-margin shouldnt work. And I never tried. So thanks a lot to jiangshui!
Here the updated jsfiddle:
http://jsfiddle.net/daFalk/dx3xLgLq/5/
The full scope of my specific issue is likely too deep to include in a question here. Instead I am looking for clues.
The nature of the problem has to do with overflow: hidden. In Internet Explorer 11 it is working sometimes and at other times not. I have an element that is larger than the body and I have set the body element to overflow: hidden. Sometimes the page loads and works exactly as expected, but in about 60% of my tests the browser just ignores this property. If I look in the inspector the property and value are present, yet are not having any affect on the rendering of the page.
I have tried using a container element instead of the body, but the same thing happens. opening the inspector panel while scrolled to the top of the page will sometimes fix the issue. Any ideas?
There is a lot going on with this layout which is why there is no fiddle. Everything else works fine in IE. There are no errors in any browser and the layout works perfectly in all other browsers I have tested (Chrome, Safari, Firefox, Opera and IE 11).
Are you using a display properly on that div or element? If you have display: inline then try to change to display:block.
I am not sure why this worked but I just positioned the body fixed. That seems to work.
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)
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.