We Keep Coding

Menu Breaks in Chrome

I'm having an issue that only appears when using Chrome.
I have a menu at the top, a search bar, and then another bottom navigation menu below that.
image 1: menu
On Chrome, when I highlight over the top menu, the menu items appear like this (behind the bottom navigation):
image 2: menu breaking
And I can't select the items that are directly on top of or below the bottom nav menu. I can hover over menudrop1 and menudrop2 but I can't select menudrop3 (from image 2)
In Firefox and other browsers, this doesn't happen. And in addition, in Chrome the drop down appears completely opaque, whereas in Chrome, it has a much lower opacity.
The weird thing is, this doesn't happen everywhere on the site.
Any help with this would be appreciated.

Use z-index: 1; for your submenu ( parent of menudrop1, menudrop2 and ... )
Another menu | item1 and ... probably causing this problem

slideshow and scroll menu work perfect with Firefox but act funny with Chrome

I have a website that includes an image gallery that turns into a slideshow on click. The website is divided into 4 vertical sections and you navigate through it (jumping up/down from one section to the next) with a smooth scroll effect by clicking on the main navigation menu.
Everything works perfect with Firefox, but when I open it with Chrome 2 major problems:
1. The page keeps bouncing up and down like a yo-yo whenever you're in the "projects" section. Click on "Projects" in the main nav menu and you will see what I mean.
2. The slideshow doesn't work properly. Click on "Artwork". Then click on any image. You'll see that if you do this in Firefox the navigation menu is hidden behind the slides. However, with Chrome they are in the front. I have set the Z-index of the slides with #slideshow img {z-index: 1000} so I really have no idea why this is happening.
You will find my website here:
http://ninetieschild.github.io/my-site/
Thanks so much.

Issue:
$window.bind("scroll resize", function() {`
is wrong. It keeps auto executing continuously.
As this statement is always true
if(scrollTop > $('#services').offset().top-$(window).height()+300 && scrollTop < $('#about').offset().top-$(window).height()+$('#cogs').height()){
transform functionality after changes window size/scroll so the function gets executed again.
What are you trying to accomplish?
You just want to click on me menu and get scroll to that specific sections?

Responsive nav bar pushes down content in Safari/iOS

I'm working on a site here: http://teamcherry.com.au/
The site uses a responsive nav plugin, so when viewport is narrow enough the nav is hidden behind a Menu button. When the menu button is pressed, the nav appears. In Firefox and Chrome, the nav appears over the top of content, which is the desired effect in this case. In Safari and mobile Safari however, opening the nav up pushes content down, which isn't what I want.
I've been trying to fix the issue by applying position: absolute to various elements but the layout keeps breaking. I'm sure I'm missing something really obvious here! Anyone able to help me out?

Remove float: right from your nav style.

JavaScript media query to reverse user triggered JavaScript event

The brilliant amateur that I am I decided to make a website responsive. My website has a sidebar and I figured I would use a media query to hide that sidebar and show a button to make the side bar toggle-able. I used jpanelmenu http://jpanelmenu.com/ to do this.
The problem is if you do the following it all breaks apart
shrink down browser width to mobile size
the sidebar disappears
the button to toggle the sidebar appears
press the button and the sidebar appears
expand the browser window to normal side
now I have two fricken sidebars (the one from the jpanel menu) and the original sidebar that has now reappeared because the browser window has grown and my media-query unhides it
to top it off the mobile sidebar toggle button has disappeared because we are back to normal width
clearly this won't work, so should I use modernizer and a javascript media query ala Triggering jquery with css media queries
to fix it or is there a more elegant solution my amateur mind is not seeing?

iPad disable document scroll but not div overflow scroll

I'm developing modal windows with the ability of being scrollable, like pinterest ones. When they are fired define overflow: hidden on body and overflow: auto on the modal box container. This works very well on desktop browsers but my first test on iPad (and I assume that probably on iOS in general) reveals a problem:
When the scrolling of the modal ends, if the document is longer than the modal the scrolling continues.
I tried this with the intention of only accept scrolling if it is triggered by the modal or its container:
// Disable browser scrolling on iOS
$(document).on('touchmove',function(e) {
if (($(e.target).attr('id') != id) &&
($(e.target).attr('id') != ('modal-'+id))) {
e.preventDefault();
}
});
And it really works doing strictly that. The modal scrolls and when it ends scrolling the page is possible only if you scroll inside the modal.
Do you have any idea?
Try it in your ipads if you want (you have to click on the modal button): http://www.onebigrobot.com/beta/altair/transforms-so
Thank you in advance!

Small changes are powerful!
All the problem is solved changing position: absolute by position: fixed on the modal container (and also on the dark mask of the background if needed). In fact with absolute positioning the modal only worked because the button was at the top of the page.
With fixed positioning desktop browsers works perfectly, and on the ipad something interesting occurs. When the scroll of the modal ends the scroll of the page begins to work but with the modal always on top well positioned.
I hope this question could be useful for someone.