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.
Related
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 using Bootstrap on a website for the first time and have run into an issue with IE (tested in version 11).
I have a login form in a dropdown menu and below the form I have a Facebook login button. No problem in FF & Chrome, but IE (as usual) is acting strange. When the mouse goes over the Facebook login button, the dropdown suddenly closes.
Here's the website: http://www.pricewombat.com/
Steps to replicate:
Go to the website in IE
Hover over Sign In to open the dropdown
Move mouse over the Facebook login button
Feel sorry for IE
What might be causing the issue, and how can it be fixed?
Well, it's an old "bug" which already exists at least as of IE 7.
The problem is, that IE looses the :hover state, when there is an iframe inside the hovered element.
I set up a JSFiddle which worked for me (tested with IE 11 and changed mode via developer tools), but I had to choose jQuery version 1.9.1 as 1.10.x doesn't work!
Explanation: When the li element has mouseenter event (so it is hovered), and also when the iframe is hovered, an additional class name is added to the li. And it is removed when the mouseleave event occurs.
The Javascript code is not that "elegant", but should only demonstrate the needed concept. ;-)
I believe that it may be because of the way IE handles hovering over iframes. When you hover over the Facebook "Sign In" iframe, IE thinks that you are no longer hovering over the dropdown. One possible solution is adding a hover state using JQuery:
$('.fb-login-button').hover(function(){
$('.dropdown').mouseover();
});
If you are using Modernizr, you can wrap this in a nice if statement to make it so that this will only execute for IE.
Unfortunately, I do not have access to IE right now so I am unable to test this out, but this is my best guess. Please let me know if this helps!
This is really odd. I'm not complaining that something works, but it is very surprising ..
On my website I had the usual css :hover for the navigation to reveal sublinks. But on the mobile browsers this needed some js help to make it work (as you can see from those many posts about "css hover not working on mobile browsers")
I made a simple script to fix the hover problem. But today as I was rewriting the code, since I noticed that it was not fully working as intended, I removed the entire mobileDetect.js which was handling the mobile hover. And now it works, without any additional scripts.
I tested it with chrome and safari on my ipad and iphone. It works as intended... did I misse out a big mobile browser update or something?
I use Jquery from google, no framework and standard HTML5.
Here is the site : (easy-sailing.ch) "EVENTS" and "AUSBILDUNG" are the mentioned navigations with sublinks.
I am just wondering if this is some odd anomaly and therefor should put my script back in or just enjoy the good news? :S
as far as i remember it has always been working...
...it is just not needed because there's no cursor and hover happens usually when you click (touch in this case) and you'll leave the page before noticing hover.
on android i can observe it when i touch+slide up or down.
I have fixed this for me by removing :hover selectors/rules at runtime https://github.com/kof/remove-hover
Here is the web site: plantcatching.com
Set "Montreal" in the search textbox and hit Enter. The map should go there and show results (after you zoom in one notch I think). A panel will slide from the left for the list of results. This panel has a white arrow attached so that it's possible to collapse/expand it. Here is what happens:
On IE/Firefox: the panel slides well.
On Chrome: the first time the panel extends, it works well. Then any
new manipulation shows the issue. The content of the panel and the
tabs will change position only after the jquery.animate("left") is
finished.
I let you have a look at the css structure under firebug or other dev bar, but basically it seems that chrome doesn't like the various "position:relative" css rules inside the panel. The problem is that I don't control them. They are set by the mCustomScrollbar jquery plugin. To check that this is the actual reason, just zoom out a little until a small window appears notifying that you should zoom in again. This empties the content of the pane and collapses it. See how it closes nicely this time, since there is no content anymore in the pane.
The question is: how should I modify the css (the part I control) so that it works well in Chrome and continues to work well in other browsers?
Let me know if something is unclear, I will update this question.Thanks for your help.
There was no answer here, so I decided to fix it myself by adopting css3 transitions on chrome only. This is now far better but you will notice that the tabs are a bit lagging when the panel slides. This does not happen in non webkit browsers.
I'm really hoping I can find a CSS expert to help with this odd problem.
In Chrome/Firefox and Opera this works fine.
However in IE9 and maybe earlier versions I have a problem.
To see the problem follow these simple steps.
1) Goto www.spoilertv.com and hover over the HOME button/link
2) Hover over the "Twiter Connect" button
3) The menu disappears.
The Twitter Connect button is a Twitter Anywhere button which basically creates an iframe.
Hovering over the twitter button causes the menu and hence the button to vanish. It's as if the mouse has moved away from the dropdown.
This all works with Firefox and Chrome and Opera.
I'm at a complete loss here :)
Looks like this is "designed" IE behaviour
IE7/8: div loses :hover if mouse moves over an iframe which is inside the div!
I've had to replace the Twitter #Anywhere button with a custom button and signin function which removes the need for an iframe
https://dev.twitter.com/docs/anywhere/welcome#login-signup