Just figured out that one specific div is hidden in Safari. - For both Mac and iPhone. I have tried searching for the problem, but I can´t figure out where it all goes wrong. It looks like the div container is misplaced.
Please see attached images to see how the container is moved.
Chrome
Correctly placed.
Safari
Misplaced
By adding the following to container it gets positioned almost correctly:
.container {
position: absolute;
top: 0;
left: 0;
right: 0;
}
But then the hamburger menu does not work. So I don´t believe it should be set to position: absolute, but must be some other code that is either not valid in Safari, or something important has been forgotten.
Not sure how much of the CSS which it needed. It`s pretty long and complicated so please ask and I will provide the code you ask for.
Link: http://www.hitra24.no/
The problem was located in my CSS where .nav was set to overflow: -webkit-paged-y;
By removing this it solved the problem on Safari on both iPhone and Mac.
Related
I have a problem on my blog.
In firefox theres an ugly space on top of the site, which is not visible in chrome and i don't get rid of it. Firebug didn't help anyway.
It's weird: When i change the margin-bottom of my <div class="ontop">, then the space appears. if i set it to 0, its gone!
Could you please help me? Thanx!
There is some issue of 'margin-bottom: 300pxin .ontop class in firefox. It is something weird.
Set height: 100%; will do the trick. and remove top margin.
I think this is bug in firefox.
give class .wrapper{display:inline-block}.
it will solve the issue.class .ontop to {float:left}
Even though I don't have the time right now to figure out why this problem occurs, here's a quick fix:
Change the
margin-bottom: 300px;
to
padding-bottom: 300px;
Edit:
Somehow this problem seems to result from a non-explicitly set height for .ontop. If you set
height: 82px; /* Height of your logo */
the problem also disappears and you can continue using margin-bottom.
I'm so sorry, for I write a request for you, but I can't fix my page. I read several Howto, Stack Overflow, blog entry about ScrollSpy, but I can't fix my problem. Can anyone help me?
I know, the best way is I copy-paste the page into a code sharing site, but this problem is depending on the full environment. Sorry! I hope!
The page: http://eskuvonk.dras.hu/
I have a page with fixed overlay (header), and I want to use the main scrollbar for scroll. The problem is next:
Under Chrome, the whole page is working good, but under Firefox, the menu is crazy! Highlights good menu at first scrolls, but after jump immediately the last. Why? I checked the divs in debuggers, the padding, and others are too far for indicate the end of the page.
Please, help me! My wedding is depending on it... :)
Thank you!
You have position: absolute set on your container div -> <div id="streak" class="container">. Remove it and it should work just fine.
#streak {
position: absolute; /*Remove Me*/
}
This might break the layout of your page a little bit as is, but that is what is causing the issue in FF, so you'll have to clean that up as well.
The final solution was:
Removed all position: absolute; from any parent node of ScrollSpy inspected anchors.
Replaced padding-top: 300px; to margin-top: 300px; on body.
Added margin-top: -300px; padding-top: 300px; to #streak for fix the scrolling.
FYI: The page contains fix positioned, 300px height menubar.
I have been making some modifications to an existing website and a strange issue seems to have arisen. After scrolling down, and then back up, some div elements on the page are disappearing. The problem only seems to appear when using Safari on a desktop. Moving the mouse seems to cause the divs to immediately reappear...
Our jQuery uses some 'on scroll' triggers but these have never caused any of the problems that appear now, and I suspect that this is not the cause of this strange problem.
The problem on the page can be viewed here http://www.upreach.org.uk/2014/about.php
I've never experienced a problem like this and am quite perplexed about what could be causing it.
Some fixes you can try :
give to the .shell element a big z-index and be sure it always has a position relative (not right now):
.shell {
width: 800px;
margin: 0 auto;
position: relative !important;
z-index: 9999;
}
if you can, don't put your background as an image with a fixed position, it occurs some bugs in some browsers, do the same with :
body { background-attachment : fixed; }
(Yeah, you'll need to put your background image in the body).
Just in case somebody else is having this specific issue in the same way I was. Check if you are using transform-style: preserve-3d. That was the problem for safari in the wrapping divs of my virtual scroll.
I have a blog that I'm having a slight styling (CSS) issue in Chrome only. For reference the blog is located here.
The issue is that (in Chrome only) when I scroll the content should go under the nav bar (but over the top of the big image), but it goes over. Again, this issue only exists in Chrome.
I'm not sure where to even start, but I'm hoping y'all will have a few tips for me. Thanks!
The issue was actually fairly simple and had to do with the positioning of the header elements.
I changed #header_area .page to position: absolute, and #header_area .Nav to position: fixed. I also gave #header_area .header a top margin of 70px and made that position: fixed as well.
Working on my portfolio and came into a problem with positioning - http://harden6615.com/portfolio/index.html - I have a fixed header nav that I used a jquery scroll on and works fine until it passes down through the work section of my site. The fixed header's depth is below the work images instead of above. Messing around with it, I realized it has something to do with position: relative, but do not know how to work around it.
I tried z-index: -1 to my work images, but this breaks the jquery hover I have on them. Anyone know of a solution to fixed positioning or if there is a solution?
I tried it in Google Chrome with the google developer tools and it works when i add this to #floatingbar:
position:fixed;
width:960px
z-index:10;
Set a higher index to your #floatingbar DIV, rather than lowering the portfolio squares.
#floatingbar {
z-index: 9999 !important;
}