I have a page with some CSS animations. This page also has a map generated via the Google Maps API.
You can see a stripped down demo here:
http://dev.timmurtaugh.com/demo/projects-map-debug.html
If you click the "Toggle Size" size link before hovering over the "Main Nav Item" you will see the toggled element resize as expected.
However, once you hover over the nav element, which should trigger a flyout menu via CSS, not only does the flyout menu not appear, the "Toggle Size" link stops working.
As if this weren't odd enough, the web inspector thinks everything is working as normal — it reports that size of the box is changing, when visually it is not.
I have tried isolating the map in an iframe, and I get the same results.
This seems to happen only in Safari (5.1.5) / Mac, not in any other browser that I've checked (latest Chrome / Firefox / Internet Explorer 9).
I have tried the suggestions in this question: jQuery jScrollPane issue/conflict with Google maps on Safari
... and in this one: Mac Safari 5.0.4 bug when using Google Maps API
Is there anything I can do?
With the over-rides mentioned above (visibility:visible; & -webkit-tranistion:opacity...;) this seems to work for me.
http://jsfiddle.net/vxfhT/1/
Related
The entire screen flashes blue briefly with mobile chrome and hyperlinks using responsive.menu in wordpress. I'm looking to remove this effect.
You can reproduce the issue by using chrome and putting the browser in mobile mode. Navigate the browser to http://responsive.menu and use their menu on the right hand side, simply click the plus and minus arrows on the sub menu to demonstrate the effect.
Also, a screen shot and screen cast:
Shot:
https://drive.google.com/uc?export=download&id=0B-M6Yes83t08RjJ1T1IxU2JDTjg
Screen cast:
https://drive.google.com/uc?export=download&id=0B-M6Yes83t08cTRJbXNNTGdjcmM
From the author of the component:
it is due to the fact that for mobiles to detect a click event on the
body of the site without reverting to loading the jQuery mobile
library, I have added cursor: pointer; to the body.
This has the side effect of creating these blue flashes on mobile
Chrome as the browser now thinks that the whole body is a link. The
quickest option is to turn off the "Click to close menu on body
clicks" option while I see if there is a workaround in the long term.
The only way around this I can think of is to load jQuery mobile
separately, but I was always reluctant to do this.
Question update:
This only happens on chrome mobile - how do you emulate safari and firefox mobile behavior?
In most mobile sites, scrolling will hide Safari's header and footer chrome.
However, when using Polymer's core-header-panel or core-scroll-header-panel, the chrome is always present.
(EDIT: Related issues on GitHub: https://github.com/Polymer/core-scroll-header-panel/issues/19, https://github.com/Polymer/core-header-panel/issues/15)
Here's a Facebook screenshot, and notice how the chrome goes away as I scroll down:
Here's a screenshot of my Polymer app, and notice how the chrome remains:
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.
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
I'm changing over a site from HTML to Wordpress (for the first time, so be gentle!) and I ran into an issue with Google Chrome applying styles that I've never knew existed! In this case I'm referencing the style that positions the bg.gif image background. In both IE9 and Firefox the background elements seem to work just fine, but in Google Chrome I'm having the issue.
If you go to this site: http://www.richmindonline.com/doggy2/ then right-click the upper right corner of the page in Google Chrome, then click "Inspect Element", you will notice styles that are being applied that have nothing to do with my stylesheets.
Could someone provide some guidance as to how to fix this. I've already tried adding my own styles to trump the Chrome styles, but it's not working.
Which styles are you trying to override? What you're seeing are browser defaults - all browsers have them whether they show you or not.
What I'm seeing in the inspector is Chrome identifying the text direction and locale. Are you using a CSS reset?
http://www.cssreset.com/
Should go a long way in starting all browsers at the same default.