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).
Related
I am using bootstrap to develop a responsive website. I have tested it in Firefox, Chrome and IE where everything seems to be working, but the dropdown menu (in main menu) adds a offset to it self in Safari.
I checked the Safari inspector to see what went wrong, but the inspector seems to think that the dropdown menu is displayed correctly - even though it is not.
See http://birdatwork.com/stackoverflow/safari-bug.html for an example of what I am talking about.
The site can be seen at http://kik.vejnoe.orvad.net/en.
Hope you can help find out why it happens.
I have not found out why it happens, but I have found a solution. The solution is that I wrote some JavaScript that listens for clicks on menues and window resize events (only in Safari). Whenever one of these events happens the code will position the menu to the left by using the jQuery offset function.
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.
This seems to be a bug specific to firefox (version 7.0.1), I have copied the offending code into jsFiddle.
but jsFiddle DOES NOT REPRODUCE THE BUG. copy the code from jsFiddle into a blank html document and test it locally to see the issue.
http://jsfiddle.net/kCMeu/1/
This is the normal state of the menu items before you over over any of them:
This is the first sub_item when hovered over wiht the mouse:
And the third sub_item:
And now the last:
Where did that white margin come from around the #global_nav_box div? it only shows up on the hover state of the last sub item.
That is the bug I cant (conveniently) fix.
Fixes I've found are:
Setting the body tag 'margin-top:0px' - but that leave an unsightly margin on the left and right of the page.
Removing the 'z-index' property from the CSS for #global_nav_box - I thought i'd fixed it, until all the content on the page below scrolled over the div when you scroll on the page.
So why does it do this? Can you replicate this on Firefox? How can I fix it?
Thanks in advance.
Update: Ive had some of my friends test it and it (the bug) shows up for some and not for others, I have also tested in in Windows XP mode and it (the bug) still doesn't show up. All my testers were running Windows 7 and Firefox 7.0.1.
I've disabled all plugins and extensions on my install of Firefox and its still there. Insane.
Although I do not know what caused this issue I have found a clean solution for it :)
Could you not wrap the absolute positioned div in a fixed div like this: http://jsfiddle.net/HelloJoe/JXWNj
Source: HelloJoe
His solution from the previous thread that was the cause for this one fixed everything. :)
These are IE7 Only problems:
Navigation Problem
The active tab "jumps" whenever a user hovers on an inactive tab.
Screenshot:
http://dl.dropbox.com/u/6688069/navi.jpg
Search Filter Problem
I can't seem to get the height correct in IE7 without breaking the functionality.
Screenshot of what is should look like:
http://dl.dropbox.com/u/6688069/filter.jpg
Thanks!
What I'm seeing is that in IE7 this element:
<ul class="multiselect" id="multi-filtercountry"/>
is causing it those list items to expand... I also noticed that in Chrome, a real browser, none of those sidebar elements are expanding their parent. That means to me that you have one floating element in there somewhere, and the others aren't.
If you use Chrome's developer tools and mouse over the elements inside <span class="expanded"> you'll see that their position is determined to be up top, meaning they aren't flowing properly.
My best advice is to try to look at this not as an IE7 problem but a markup problem in general.
My site http://bit.ly/aokA4I has a search bar on the top right.
You can see it on IE7, FF, Chrome, Safari -- but not on IE8. It gets chopped off.
BTW if you happen to see it on IE8 just refresh the page and it will chop.
If I run IE8 on compatibility mode the search bar becomes visible.
Any ideas how to solve this?
Thanks!!
It's because IE8 is interpreting the nature of its parent container: header_widget_1. The sizing or formatting of this element is causing the <li> element to be clipped prematurely. If you have Google Chrome, you can right click the sidebar element you're asking about and choose "Inspect Element". This will show you what the elements are doing.
Edit: You also have a sizable horizontal scrollbar in IE7.
Edit 2:
You might try altering the height of your #header element to be the height you want. Since height is not expressed in the sidebar class, this may also be contributing to the problem.