Scrollbar doesn't show up in Chrome on OS X - javascript

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.

Related

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]

JS/CSS Locking scroll on iOS Safari doesn't work when the browser interface is down?

I'm not sure if this question needs code but I will try to explain as well as possible.
I have a simple menu button that opens a full page overlay (w/ opacity 0.9)
so I want to be sure the use doesn't scroll the content in the page while the menu is open.
I implemented few techniques (body: overflow hidden, position fixed) but I realized that when you open the website on my iPhone Safari, the rules work only when the viewport has the browser interface fully visible (not the minimal ui on the right) but when in minimal Uimode, then the scroll can happen.
also since my design wants to be semi-transparent, the user can clearly see what's happening below..
any solutions?
It seems the best solution I found so far is to use
touch-action: none;
-ms-touch-action: none;
on the modal div. Not sure why but if apply the rule to the body doesn't work.
Of course this may prevent the modal to be scrollable...haven't tested yet, but at least is one less headache for today.

Scrollbar not visible for certain users

We have a web app which has a fixed side bar used for navigation. The app is built of this template
We are facing a very strange problem where the scroll bar disappears from the html and the page gets cut off. The interesting thing is the scrollbar shows up for 99% of our users but not for the remaining 1%.
We tried everything we could think of including setting the body and html to 100% height and automatic overflow, we also asked those 1% of our users to disable all their browser extensions, clear their cache but nothing helped.
Those 1% still have scrolling issues and their pages are cut off.
What can cause a scrollbar to disappear for some users but not others?
Without actually seeing the page, the only thing I can think of is making sure the scrollbar always shows with overflow content like so.
html {
overflow-y: scroll;
}
Some additional research shows that sometimes Firefox doesn't play nice, so you can try this if that's the case.
html {
overflow: -moz-scrollbars-vertical;
overflow: scroll;
}
Source: https://egilhansen.com/2007/03/28/css-trick-always-show-scrollbars/

jquery carousel not functioning properly in Chrome or any webkit browser

I made a infinite carousel from scratch into a plugin with jquery. It works fine in Firefox but it works partially in Chrome, i.e. elements disappear as I slide the carousel.
Please view my codes here (it was too long to paste it): http://jsfiddle.net/HkTks/2/
Compare the carousel with Firefox and Chrome.
Why is Chrome behaving like that?
Many thanks​
Well, this may be a webkit bug. Looks like somehow the anchor element accidentally inherited absolute positioning rather than relative.
Seeing the style of .iconList a to include position: relative; and removing top:0 seemed to fix it for me.
Here's the updated fiddle: http://jsfiddle.net/HkTks/4/

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.

Categories