I'm working on this page: http://jsfiddle.net/Saturnix/4RzyG/embedded/result/
code is here: http://jsfiddle.net/Saturnix/4RzyG/
It works fine in Safari/Firefox/Chrome and other decent browsers. However, when opening it with Safari Mobile and pinching (zomming in) something strange happens.
As you can see, text fades away at the bottom of the page: this is done thanks to a png image with transparency applied at the bottom of the central div. They are both made to occupy the same space and handle window resizing but not Safari Mobile zooming.
This makes sense if you read the code: the bottom gradient (the png image) uses position: fixed to stay always at the center of the page but, as soon as you "pinch in" with Safari Mobile, it will always remains in the center.
I'd like the position to be fixed only for the height of the element (otherwise when scrolling the png image will detach from the bottom) but not for the width. Is this possible? How would you change the code to make it work on iOs?
This is the css code which control the text fade out by placing the png image
.bottom_fade_center {
position: fixed;
bottom: 0;
width: 80%;
left: 10%;
background: url("bottom-fade.png");
background-repeat:repeat-x;
height: 400px;
pointer-events:none;
z-index: 3;
}
Thanks in advance!
Related
I'm developing a web site based on the Hyde theme for Jekyll.
This layout uses a fixed navigation bar on the left with 100% width. This is working fine in most situations.
In Safari on iOS, however, the height of the viewport changes while the user is scrolling as the browsers top navigation bar collapses. If this happens, the navigation bar's size is not updated until the scroll stops, leaving an area in the lower left corner that is not covered by the navigation bar:
(Notice the text extends below the navigation bar. This screenshot was taken while the page was in motion.)
This video shows the problem in action.
Is there any way to force Safari to update the navigation bar's height while the scroll is in progress?
its an ongoing discussion. There is no real solution for this problem. https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html
What you can try for your website is the following:
.sidebar {
position: fixed;
left: 0;
bottom: 0;
width: 18rem;
text-align: left;
height: 100vh;
}
This will align the sidebar to the bottom and the text wont cut. The white bar will appear on top but it wont be too intrusive as the bottom being cut out.
Add the below styles to fix the issue
html,body{
-webkit-overflow-scrolling: touch;
}
Here you find the reference
Got a question specifically about the background image on a simple site I'm building.
http://polyamsterdam.nl/
The background image in question is behaving like it should (or at least as I want it to) on my laptop. It sticks to the bottom right corner of the screen.
On mobile (tested it on iPhone so far) the image also sticks to the bottom right corner but if there's more content then fits the screen the background image is pushed to the bottom of the page (instead of just the bottom of the screen).
Haven't been able to find a solution in the archive so I hope someone is able to help.
Thanks, Peter
I only tested in browserstack but adding this fixed the problem in Chrome for Android:
body, html {
height: 100%;
}
Edit:
I misunderstood the question. The best way I can think to fix this is to apply the background to an element that has the dimensions of the screen and has position: fixed set to it. The way backgrounds work, you will always get the image pushed to the bottom. Don't forget to set the z-index correctly (to -1 for instance) to make it stick to the back of the page.
So, in your HTML:
<body>
<div id="heartbackground"></div>
<!-- the rest of your HTML... after this -->
</body>
Then in your CSS
#heartbackground {
position: fixed;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
}
I've been researching this problem and can't seem to find an answer that properly addresses my issue. I have created a vertical sidebar menu which stays docked to the left side of the screen. The menu has a different background color than the rest of the page and should be as tall as the entire page. To accomplish this, I've used the CSS properties:
#menu {
height: 100%;
background-color: #222;
position: absolute;
top: 0px;
bottom: 0px;
}
This works correctly, however, when elements are dynamically added to the body in such a way that they cause the height of the body to change, the height of the menu no longer takes up the entire screen. Instead, I get white space below the dark background color of the menu. This also occurs when I have the console open in Firefox and then scroll down.
How can I keep the vertical menu bar stretching down then entire side of the page? None of the similar suggestions I've seen so far on Stackoverflow or Google seem to work.
height:100%; takes up the view-port height so if your body content are increased than view-port height then you'll see your siderbar 100% heighty as its view-port as is.
You can just remove the height:100%; and your code would work fine, by using fixed positioning and using top:0;bottom:0; which would be the document's top and bottom values.
#menu {
/*height: 100%;*/
background-color: #222;
position: fixed;/*using fixed positioning only works*/
top: 0px;
bottom: 0px;
}
Also, don't forget to use the width while using fixed positioning, or alternatively, you may use left and right values.
I've gone through the answers for similar questions and none of the answers helped with this issue. My background image is being cut off on the bottom at the viewport. If I remove the background image and put a solid color as the background the same thing happens. The text on the mobile page can be seen, the background just cuts off.
View the site using Chrome's device mode as iPhone 6 to replicate. Any help on this matter will be greatly appreciated!
Dev site
Your content element is set to height:100% which makes it 100% of its parent's height. It ends up not being tall enough to fit the 1000px tall element within it. Normally the element would just expand to contain its contents, but your height attribute overrides that behavior.
content also doesn't seem like it needs to be position:absolute; either. That isn't helping the sizing issue.
I would get rid of:
div.content {
position: absolute;
top: 0;
top: 0;
width: 100%;
height: 100%;
}
Then also remove the inline-style height: 1000px on the .page element.
Check out this picture to see what I am trying to accomplish. Basically I want to use a full screen background image and then overlay a div (in the linked picture, this is the gray area in the middle with the red lines around it) after the logo and nav on the left that will always have a 100% height regardless of scrolling.
The only way I think I can pull this off is to use a background image for the gray area that is repeated vertically, and then make a div for the full screen background image and change the z-indexes around to get the desired layering.
The css I was using for the overlay div was:
#overlay
{
position: absolute;
left: 360px;
top: 0;
bottom: 0;
width: 600px;
height: 100%;
}
But when you have to scroll for larger content, the div always ends at the "fold" and then the background image takes over for the rest of the content.
Are there any tricks I can take advantage of to do this in purely CSS? Also, I don't want to use CSS3 multiple backgrounds because of cross-browser concerns.
Try deleting the height: 100% and changing the position to relative.
You may need to add some padding and margins to get it exactly how you want but this should just about fix it.