This issue is specific to Chrome running under Android (possibly iOS, I didn't test).
I'm trying to get a simple gradient to cover the entire page height and remain fixed while other page elements are scrolling.
Everything works well until chrome for Android auto-hides the URL bar at the top as you scroll down.
At that point, a portion of the background, equivalent to the URL bar's height turns white at the bottom of the page.
Any ideas on how to avoid this issue and maintain my gradient across the entire page?
Pseudo HTML:
<html><head></head>
<body class="menu_body">
[Some scrollable content]
</body></html>
CSS:
.menu_body {
color : #fff;
background : linear-gradient( 130deg, rgb(44,49,65) 0%, rgb(94,67,70) 100%);
height : 100%;
margin : 0px;
padding : 0px;
background-repeat: no-repeat;
background-attachment: fixed;
}
Related
I have a website that requires a 'bottom right' background image alignment, along with a background colour of #000.
My css tests okay on all OS and browsers I've tried so far (chrome, ie, moz, safari) except for chrome on android, which renders the background image outside the browser window.
Other image alignments work fine - the problem seems to be only with bottom right alignment, and only with chrome on android.
Problem page url: Features a background-image: bottom right alignment
CSS as follows:
body {
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 1em;
background: url("../images/bg_prices_XL.jpg");
background-size: contain;
background-color: #000;
background-repeat: no-repeat;
background-position: bottom right;
background-attachment: fixed;
}
If I change alignment to background-image: top right; then the problem goes away.
Page renders properly on android moz. Do I therefore need to include a -webkit specific alignment?
Havd tried adding:
html,body {
height 100%;
width 100%;
}
...but no luck. Viewport size already set to device size, Chrome seemingly is rendering oitside the viewport anyway, below the footer.
Tried styling the background-image under html section of css, but didn't work.
All thoughts welcome.
I have inspected the page throught chrome dev tools. I think if you remove background-attachment: fixed; propery it will work.
...never mind folks. I made the background a fixed, 100% height and width div, with a negative z-index. It feels like a clunky workaround to me, but it seems to work. Any better suggestions though would be appreciated thank you.
I have a website that i'm trying to design. I've filled the background with an image that takes 100% of the height of the screen. On a computer this works perfectly, but on mobile it only takes 100% of the webpage space available at load, which includes the browswer's URL bar at the top. When you scroll down, the URL bar disappears that leaves a gap at the bottom of the background of website.
The website is a single webpage website. The 'homepage'/initial view on load fades in to the background image. I want the actual content to be just off the screen on load, and so having a background image that just fills 100% of the height of the screen is important.
How do i fix this?
Below is how i've filled the background and screenshots of the website in question.
I've filled the background of the website using the following CSS code.
html{
background: url(../content/BackgroundAndHand03.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height: 100%;
opacity: 1;
}
Website with mobile browser URL bar
Website without mobile browser URL bar
This prevents scrolling past the html element and allows your body to maintain its position during over-scroll on mobile devices, so even if the device supports over-scroll, the html is locked to the desired color or image while the body moves.
html {
overflow: hidden;
height: 100%;
}
body {
height: 100%;
overflow: auto;
}
Make sure to include this meta tag if you already haven't
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I'm developing a web based app. I load a page on an android WebView.
The issue is, I set a wave border effect to a div using css3 radial gradient, the page shows correctly on most browsers, and works fine for iOS version app as well. But on the android app, If I add this style, the page will totally become blurred. I paste my css code here:
wave-l:before{
display: block;
position: absolute;
content: '';
top: 0px;
left: -4px;
height: 100%;
width: 4px;
background-position: 0px 0px;
background-size: 4px 8px;
background-image: -webkit-radial-gradient(100% 4px, circle, $color 4px, transparent 4px);
background-image: -moz-radial-gradient(100% 4px, circle, $color 4px, transparent 4px);
background-image: radial-gradient(circle at 100% 4px, $color 4px, transparent 4px);
}
This css will generate a left wave style border. The blurred pages shown on android WebView is as shown below:
I'm quite sure it's this css code snippet caused the issue. So anybody know the solution?
Add the code
android:hardwareAccelerated="false"
in the AndroidManifest.xml webview used activity.
It is too late to respond, but I was also getting the blurred issue in webView. I resolved it by adding
webView.getSettings().setJavaScriptEnabled(true);
It may help somebody
Most mobile browser will have a default behavior to allow the users to continue scrolling when they reach the top or bottom of a page, leaving a white space on the top or bottom of the page. And then the whole page will bounce back to fill the white space. In native iOS applications, we can easily set images and even interactive elements for these top and bottom areas. I wonder if this can be done for pure web applications.
What I tried is to set background image of html,body, for example:
html, body {
background: url(../img/topnotification.jpg) no-repeat top center;
background-size: contain;
}
Unfortunately this didn't work because it seems the enter body was being over scrolled. I wonder if there is a special property we can set for the top and bottom empty over scroll areas for mobile websites.
I also have tried:
html:before, body:before {
width: 100%;
height: 100%;
top: -100%;
position: absolute;
background: url(../img/topnotification.jpg) no-repeat top center;
background-size: contain;
overflow: visible;
}
This apparently didn't work either.
I believe that this depends solely on the browser as I do not know of any html elements that specify white spaces resulting from over scrolling.
Personally I never experienced any thing like this in windows, chrome, and android.
You might be able to create an animation that happens when the scrolling reaches the bottom or the footer of the page, but I do not think anything can be done to fill in the white space. It is mostly likely browser based.
It's hard to formulate a brief title. What happens is that the background-color of the centered div extends to the left and right edges of the screen and the background-color of the body is ignored or overridden.
I'm using the twentythirteen theme for this document.
It sets a width smaller than the full width and uses margin:0 auto to center the content divs.
In a standard native web view component in our app on Iphone and Android, the automatic margin (left and right) does not become the background-color of the body, but white. Between elements in the content div the correct background-color shows through their margins.
Also, Chrome on Android shows the same white margins.
Have both leading OS developers decided that their respective -kits should do this, or what is going on? Note that the CSS validator throws up hundreds of errors - well, programming a proper theme from scratch is not in the budget for this project.
If you can link to a web page where this works, I could make the web view load that and check.
A background-color is set on several classes.
.entry-header, .entry-content, .entry-summary, .entry-meta {
background-color: #ffffff;
margin: 0 auto;
max-width: 604px;
width: 100%;
}
Delete the background-color and the issue will be fixed.