We Keep Coding

Fixed position + JavaScript issue with Safari

I'm having a problem with some JavaScript that makes the rollover menu on the right (aligning with the tick mark) work on an Elementor site I'm working on. I had a another dev work on the JavaScript, and I didn't notice this error right away. Now I can't get ahold of him.
The right nav looks perfect and it does exactly what it needs to do in Chrome and Firefox. But I see now that the right nav and tick link does not work in Safari.
Elementor support was kind enough to take a look at it and they said, "...your page has custom CSS for the fixed layout menu and also I found a console error regarding a snippet for the dividers. It seems there is custom code applied to the Elemtor dividers to style the fixed layout menu. This is more a Safari and the custom code/CSS is applied to the page issue.
Despite there being a known issue with the position: fixed CSS rule not working as intended in Safari, I have seen people find a workaround to it. However, the fixed layout menu has many custom CSS and custom code applied. I wasn't able to find an immediate workaround for the many customizations you have.
The only solution I found was to remove the custom CSS position fixed which will depend much on the needs and requirements of the site."
Can anyone point me in the right direction for a fix? Have you come across this problem before with your sites?
Thanks in advance for any help.
The site is here:
[http://farallon-dev.com]

Scrollbar doesn't show up in Chrome on OS X

So I have a site built using the Kentico CMS. On page load, sometimes the scroll bars will not show up in Chrome on Mac. They do show up in Safari, reliably. I previously had this issue with Safari, and added
html {
overflow-y: scroll;
}
to my css, and that seemed to fix it. It's not working for Chrome, however.
I did notice that if I open up the dev console and then close it, it gains a scroll bar. If I change the CSS of an element to be width 99%, rather than 100%, it gains a scroll bar. However, this only works if I change the CSS that targets that element. If I change it just for that element (either with javascript or by modifying the element.style through the console), it does not gain a scroll bar.
There are no JavaScript errors upon opening the console.
My thought was to try to change the CSS itself with JavaScript, but I'm not positive how to do that.
Does anyone have any other ideas? Or how I could accomplish my plan?
I unfortunately can't reduce the problem any further. It seems to be the interaction of the whole site, including Kentico, so it doesn't seem possible to get a jsfiddle or anything.

I have solved the issue. This was caused by the following css:
html {
overflow-y: inherit;
}
I do not know why this caused the problem. I commented out this line, and the issue was resolved.

How to use jQuery to horizontally center an object in the viewport?

I know this was asked before, but my situation is somewhat... weird. I am building an iframe for later use in a slideshow element on the website.
I have a long content-adaptive flexbox that goes way beyond the screen and I want to use the css trick of
left:50%;
transform:translateX(-50%);
To horizontally center the currently viewed area of the page, so when you resize the window, the middle of currently viewed element, will still remain horizontally in the middle of the screen.
As my flexbox is content-adaptive it's like 5K px long so I obviously can't use css %. So I went to jQuery and used $(window).width() to determine current viewport size and adjust the elements with .css({}) method. Here is the jQuery code:
$(document).ready(function(){
$(window).resize(function(){
var winWidthHalf = ($(window).width())/2;
$("#ss_home").css({
"left":"-"+winWidthHalf+"px",
"-webkit-transform":"translateX("+winWidthHalf+"px)"
});
});
});
And here's the puzzle: it worked. And then I restarted the PC and it didn't work since. Whatever I did didn't seem to help. Can you help? I have NO idea what could have happened...
Here is the page preview, please don't mind other comments in the code, they are irrelevant for now: http://users.metropolia.fi/~staniss/test/slideshow/
All content is just sample.
I would also love to know how to group the $(document).ready and $(window).resize properly, since I execute the same code, but don't wanna copy paste it twice just to change the events, since that's a bad practice. I haven't been able to find the right syntax for this.
Also sorry, the sample is for chrome only, it's very early in dev so I didn't bother with compatibility yet.

It was a browser vendor extension issue (had to add -webkit- prefix to transform) :P.

Jcarouselite object seems to behave like it has position:fixed when the window is resized

I don't know how to describe the issue better. Here is a link to the site with the issue.
http://www.sc-pa.com/Home/PAsite-home.asp
expand or shrink the window horizontally and you will see the scrolling text doesn't move correctly with the rest of the window.
Ignore the menu, it was written in Dreamweaver and doesn't work well ever.

I searched for IE relative becoming fixed and found http://friendlybit.com/css/ie6-resize-bug/
I downloaded your page, saw the bug in IE8 indeed, and added position:relative; to the body element and the issue was fixed.

My javascript drop down navigation menu displays behind content in internet explorer 7

OK, so I'm working on a redesign and we've got most of our cross-browser CSS compatibility bugs worked out - except for a glaring one with ie7.
The issue is that we are using a JavaScript for a navigational menu drop down. In all browsers except the noted culprit everything functions as expected.
However, in IE7 I'm getting the drop down appearing behind my other page elements, as though the z-index was set to something negative. But I do in fact have a CSS rule applied that sets this element to a z-index of 4000, and used that rule to correct the same issue on modern browsers.
For some reasons IE7 isn't recognizing the rule. Does IE7 not support this CSS rule?? If not, any suggestions for how to resolve it for IE7? A JavaScript solution?
Here's the page in question: http://betawww.helpcurenow.org/
Thanks!

OK, after doing a bit of research thanks to Scott's suggestion about the IE7 z-index being the issue, I found the solution at http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/
The trouble was my containing elements (div#header and div#mainContent) needed to be assigned z-index values for IE7 to resolve this issue.

I also ran into this problem, but assigning a high z-index to the containing element (menu) did not resolve the problem in itself. I had to add position: relative to push it in front of the stubborn script (of course, assigning z-index: 0 to the image script).

In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly.
This could be part of the problem, if you need a JS solution, you might look into the following project:
http://code.google.com/p/ie7-js/

OK, after doing a bit of research thanks to Scott's suggestion about the IE7 z-index being the issue, I found the solution at http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/
The trouble was my containing elements (div#header and div#mainContent) needed to be assigned z-index values for IE7 to resolve this issue.
This is very useful. Thank you so much.

Put your menu in a new DIV and give z-index (greater value) to that DIV.

I had this problem and I put this code in the page(s) with the issues and it solved it. Just replace div with whatever the element is.
<script>$(function() {
var zIndexNumber = 1000;
$("div").each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
</script>