Im using fullpage.js plugin for my project.it works fine in all other browsers when it comes to ie it shows a horizontal scrollbar.
Looks like something inside your container class element in the 1st section is causing the problem.
It seems your element with the class home-banner-midle is the cause of it. Probably because of left:50% and width:100% being absoluted positioned.
Related
This is a very weird and specific bug that only happens on Firefox, and I'm having trouble narrowing it down.
I have a page with a sticky menu followed by a fluid container.
In order to remove all padding from the container while keeping everything else untouched (like column gutters), I had to add this CSS to it:
#main-container {
padding: 0;
overflow-x: hidden;
}
This is the only simple way I found to do that, and it works.
If you remove the overflow property, some horizontal scrolling appears.
See https://stackoverflow.com/a/35192643/5845942
But when I pin the menu, scroll until its position becomes fixed, and interact with certain items on the page, vertical space appears on the page, between the menu and the container.
This happens when triggering CSS transitions and other JS DOM manipulations.
Here is a jsfiddle: https://jsfiddle.net/vctls/mac2Ls0d/35/
A screenshot:
And a video:
https://imgur.com/a/28KhPEY
Again, this only happens on Firefox. Chrome handles the layout without any issue.
It doesn't happen either if the menu isn't pinned, or if you remove the overflow property from the container.
This seems to be a Firefox bug. I found a similar issue was already reported:
https://bugzilla.mozilla.org/show_bug.cgi?id=1618029
I'm trying to find a workaround.
I have images that are on the left and right that are to become sticky while scrolling.
I am using position:-webkit-sticky; position:sticky; for the class stuck. It is working fine on Chrome and Firefox, but not Safari.
I don't have any overflow:auto or display:flex that would be affecting it. I have seen other demos where position: -webkit:sticky works on Safari. I just can't figure out why it isn't working on my page
Here is the page, you have to scroll down to the Celebration section to see it.
https://www.kingswaychurch.org/annual-report/
Thanks!
I figure it out. There was a div above it in the code that wasn't floated. On one side it was floated, which worked, and the other side it wasn't, which didn't work. I think sticky position was relaying on the closest div.
That is my best guess.
I'm working on a project and I'm running into a big issue. I'm using bootstrap and I need the page to be full width. I'm using container-fluid. Everything works fine on desktop but on mobile the page moves side to side as if the container is bigger than the display. There is no scroll bar but you can move it around with your finger, it only moves a little bit but it is annoying. I don't even know where to check anymore. Its a site built on the Sparkpay CMS and it uses bootstrap 3. I'm not even sure how to refer to the problem, I've been looking for solutions online but I'm not finding a lot of posts similar to my situation.
The link is:
https://store55652.mysparkpay.com/
I know I'm supposed to post code, but I really am at a loss here. I've scoured through all my CSS(there are a few files) I cant figure it out. Any help here would be greatly appreciated.
This works for me
html, body {width: auto!important; overflow-x: hidden!important}
Seems even on desktop you can scroll left/right.
The simple way to fix is add:
html {
overflow-x: hidden;
}
But actually you should fix the overflow elements. For example you set padding left/right 0 for container-fluid, then you should set margin left/right to 0 for row as well(now is -15px). Otherwise it will out of the container.
I just had the same issue and I wanna emphasize what #larrylampco said once more:
There must be some elements overlapping on your actual pagesize which extends the pagesize to where this far you are able to scroll.
For me it was a tooltip I added for desktop screens. Forgot to remove it for mobile. The tooltip wasn't visible when loading the page on mobile, but it was there. That's why the page extended.
To figure out what was causing this, I put my desktop browser in developer view, chose mobile view and selected an iPhone, then "swiped" so my content was off-center. I could then hover the inspector arrow tool over the empty-looking margin until I found the culprit.
In my case, it was an issue with the mobile menu not collapsing perfectly on narrow screens.
Keep the position of the container(e.g. div, nav, etc.) static.
I had the same problem. Changing the container position in which the problem persist solved my issue.
It's all about margin, find out which main element has margin by using chrome devtool and make it margin:0;
or try this body {
margin:0;}
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
Just Copy this code in body and text. I will help you
Please have a look at the following Kendo UI Dojo
http://dojo.telerik.com/#geeforceone/IkiCO
It renders the following html in Firefox. "right" should be also placed in the header, but it's not. It works fine in IE11 and Chrome.
What I'm doing wrong?
It's because you're telling the object to flow right, but your 'left' is not floating. Because of this the box seems to break. If you add a float:left; to the 'left' div it will result in the proper position of the div
http://dojo.telerik.com/ImUsA
I have a fixed horizontal menu that works well on firefox but it's presenting a problem in SOME instances of chrome. When the user scrolls down a white block covers the menu.
You can see the problem here: http://brandca.co/cterranum/
We've inspected the elements but it doesn't appear to be anything in the code and looks more like a rendering issue.
We've noticed that when we erase the element's overflow:hidden the problem fixes but we need this property to toggle the menu.
We haven't been able to pinpoint exactly when it happens since it looks it only happens in some computers and even then, a computer in wich the site rendered correctly had the problem happened oduring a presentation on the projection screen.
The fixed element was somehow screwing webkit's rendering, so I turn the element to position: absolute and on the scroll event I update the top value so it looks like its fixed. It's not pretty but it works.
Element has "position: absolute;" and inside it there is .inner-header which has "position: fixed;".
Try moving ".inner-header" outside of ".header".