Why there is a blank space under body tag on mobile view ( chrome only, ff and ie work fine )
the code is simple:
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head></head>
<style>
body{
margin: 0;
padding: 0;
height: 100%;
display: flex;
width: 500%;
background: pink}
</style>
<body>
</body>
</html>
image:
It's just the Chrome device view. You have scrolled the view down. The screen height is set at 1024px, so the body won't go any lower. There's no need to worry since you won't be able to scroll down once you have it opened on an actual device. It's just the Chrome viewer, there's nothing wrong with your site.
Edit:
I noticed you had solved it by using a fixed position. You shouldn't do that. It won't be useful in normal use, and might lead to problems in later development.
Related
I'm trying to achieve an effect similar to background attachment fixed.
I can get the result I want with clip-path or -webkit-mask-image, however on Chrome sometimes the fixed image gets hide when its out of the view and when I'm scrolling back, it does not show up until I select something or change the browser width. I have tested this on Firefox and Edge and they were both okay.
I want to know what is the issue and is there way to fix that.
gif issue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Issue</title>
<style>
.parent {
position: relative;
width: 500px;
height: 200px;
background: lightcoral;
clip-path: inset(0);
box-sizing: border-box;
}
.child {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-image: url("https://picsum.photos/800/400");
}
.filler {
width: 100%;
min-height: 2000px;
}
</style>
</head>
<body>
<div class="parent">
<span class="child"></span>
</div>
<div class="filler"></div>
</body>
</html>
As well as using position: fixed on your child element, you also need to apply background-attachment: fixed. Both these styles are required.
I went through a painful process of trying to get clip:rect working a few months ago, with the same issue as you're experiencing (I understand you're not using clip:rect). The underlying issue was that, when reloading the page, if the clip:rect area was not currently within view, the contents within it would not be rendered.
Resizing my screen or turning a style off and back on in the developer panel would re-render my images correctly but was not a solution, just evidence of the issue.
The solution, for me, with clip:rect, was in the use of the position style on the contents within the clip:rect element. I was initially using relative positioning but it needed to be fixed or absolute.
Please check what positioning you're using and see if this helps.
On an additional note - and very frustrating one too - the browser which I tested this on at the time was Chrome, mobile and desktop. I had it working very well once I'd completed development and tested it thoroughly. Today, ironically, the only browser which is not working with my clip:rect content is desktop Chrome!
This must have been a recent update to desktop Chrome... back to the drawing board.
I want to change the brightness of my background image based on the user's screen brightness. Let me demonstrate this with a simple example.
For example, let these be my html and css files:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.hero{
width: 100%;
height: 100vh;
background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url('https://cdn.decorilla.com/online-decorating/wp-content/uploads/2018/10/modern-interior-design-grey-living-room2.png');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
.content{
width: 50%;
}
.content h1{
color: #fff;
text-align: center;
font-size: 2rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="hero">
<div class="content">
<h1>My Test Text!</h1>
</div>
</div>
</body>
</html>
The result is good only when the user's screen brightness is low. When the screen brightness is increased, the foreground does not stand out from the background. Instead, An alpha value of 0.75 looks good for bright screens.
So is there any way to change the alpha value of the background based on the user's screen brightness? Any help would be appreciated.
There is no media query for detecting brightness. See all media-queries
There is no JS way of doing it as well. See another question
It doesn't make sense to me, if I change the brightness on my monitor the PC doesn't know about it. Therefore you cannot achieve this.
The least you can do is switch between dark and light theme using the media queries, but it is not what you want to achieve, I think.
For the text you can try to add text-shadow. It may help to see the text better.
There is filter properties brightness method which let you relatively change as per screen brightness. Technically, the brightness is still changing as per the screen's but it gives us leverage to increase or decrease as a constant value.
filter: brightness(1.5) (MDN)
There is another good answer about why it's not possible with JavaScript. Meanwhile, I think some additional information could be helpful.
If you can install an application to the client, say a node.js application, you can reach some kind of screen brightness and exposed the value through an API, and get that value from your JavaScript code.
It would be another question to detect the brightness but this could be a good start.
https://github.com/kevva/brightness
https://github.com/kevva/brightness-cli
This would be tricky because the solution varies, depends on your target OS, whether it's an external monitor or not etc. For example, WmiMonitorBrightness could be useful for a Windows system.
The browsers does not know the monitor information and settings. This is unlikely
But you can try this :
#:before{content:'';/*backgroundcodes*/opacity:.15}
I made an html app that has a form, for some smartphone-resolution devices (460 x 320 pixels), and it appears fine on my smartphone. When I ran it on my Android tablet (which is a Samsung Tab 3- 1024 x 600 Pixels), the app's background image was tiled/repeated. I was able to remove the repeating background image using background-Repeat:no-repeat;, but now what I am left with is a lot of white space at the bottom and to the right of the app, where the repeated image was. I am not sure what this white space is. Is it the layout viewport, or the canvas, the margins, padding, or something else?
I want to shrink the white space to the same size as the form because when I re-size (larger) my future smartphone-resolution apps for tablets, I want one app for all tablets sizes, regardless of any larger resolution tablets it may be run on. The page below shows how the app kind of looks on my tablet, but instead of yellow space, there is white space:
https://developer.mozilla.org/it/docs/DOM/element.clientHeight
I've tried some settings with CSS, meta viewport, window.resizeTo and window.resizeBy. Also, I have read up on screen.height, outerHeight, outerWidth, offsetWidth, clientHeight and clientWidth, but I don't know where these commands should go in the html of the app, or even if they will have any affect. Window.resizeTo(320,460) kind of worked in Safari desktop, but not in Chrome desktop. Window.resizeTo had no affect on my Android tablet whether the app was run as an html file (regardless of which browser was used) or as an .apk.
I have been told that resizing a mobile browser/white space (which ever this may be called) isn't possible, but I refuse to believe it. If it is indeed impossible, is there something else that I can do with the white space like make it transparent, or change it to other colors to match my apps? Or, is there some other alternative that I could try?
As an example, my Android tablet's stock video player app has a feature that allows it to be less than full screen. Surely it should be possible to do this with with an html app using html5, Phonegap, the Android API, CSS, webview, etc. instead of having the extra white space. Please see an example here: http://www.youtube.com/watch?v=2swd06TNYXc
The html for an example form is below.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Tablet Test</title>
<meta name="generator" content="WYSIWYG Web Builder 8 -
http://www.wysiwygwebbuilder.com">
<meta name="viewport" content="width=device-width; initial-scale=1.0;
maximum-scale=1.0; user-scalable=0;">
<style type="text/css">
body
{
font-size: 8px;
line-height: 1.1875;
background-color: #FFFFFF;
color: #000000;
}
</style>
<style type="text/css">
a
{
color: #0000FF;
text-decoration: underline;
}
a:visited
{
color: #800080;
}
a:active
{
color: #FF0000;
}
a:hover
{
color: #0000FF;
text-decoration: underline;
}
</style>
<style type="text/css">
#wb_Form1
{
background-color: #1E90FF;
border: 0px #000000 solid;
}
#TextArea1
{
border: 1px #C0C0C0 solid;
background-color: #FFFFFF;
color :#000000;
font-family: Arial;
font-size: 13px;
text-align: left;
}
</style>
</head>
<body>
<div id="wb_Form1"
style="position:absolute;left:0px;top:0px;width:320px;height:460px;z-in
dex:3;">
<form name="Form1" method="" action="" enctype="text/plain" id="Form1">
<textarea name="TextArea1" id="TextArea1"
style="position:absolute;left:112px;top:106px;width:98px;height:98px;z-
index:1;" rows="5" cols="11"></textarea>
<button id="AdvancedButton1" type="button" name="" value=""
style="position:absolute;left:86px;top:364px;width:150px;height:34px;z-
index:2;"><div style="text-align:center"><span
style="color:#000000;font-family:Arial;font-size:13px">Send</span></div
></button>
</form>
</div>
</body>
</html>
You are not explaining what exactly you want. Remove whitespace - you could theoretically set the viewport width to the required size and the page will have no "white space".
For Example:
<meta name="viewport" content="width=460,user-scalable=no">
But this will take up the entire width of the WebView - which based on the video you posted (which is of a native application) you don't want.
IF you are using PhoneGap or some other kind of WebView based approach to display this, then you can set the background color of the WebView to be transparent (But this may have some issues depending on the version of Android you are developing for: Android WebView style background-color:transparent ignored on android 2.2)
EDIT
I've made an available version of the example here:
Orig. Example: http://jsbin.com/orIFUpEq/1/edit
The site is designed for fixed width - it's NOT POSSIBLE to make the browser transparent, unless you are using a WebView.
The best option is to make your design flexible. The easiest version to come up with is this: http://jsbin.com/UTENavu/4/edit
Essentially made the body and html 100%, made the body background the blue color, and centred the form in the middle but removing the position absolute and adding the following CSS:
#wb_Form1
{
position: relative;
border: 0px #000000 solid;
margin: 0 auto;
}
My guess is that this is generate code from some kind of tool based on:
<meta name="generator" content="WYSIWYG Web Builder 8 - http://www.wysiwygwebbuilder.com">
So this may need a little work to get it to be happy with your changes.
Either way - you seem to be designing a fixed layout and that simply won't work out well across devices.
I spoke with a local webmaster that I know, and he told me that the
amount of white space there is depends on how the browser is
programmed. After speaking with him, I did more research and learned
that browsers are programmed to have a layout viewport of different
sizes, depending on the company it is put out by, for example (only),
Safari browsers may have a layout viewport that is 1024 px wide, and
that is why there is all the extra white space around the form in that
browser. So technically it is not impossible what I want to do, I just
had to find a workaround, since I don't know how to reprogram the
browsers my apps will be on.
I have a page in HTML5
The page is defined as 100% height, and still have a scroll bar.
At first I thought it was because the Google Map that I have in the page, and then I opened the page in another browser, scroll bar smaller than the first browser,
then I got the idea that it is because of the different Tool Bars.
Is it really because of the Tool bar or is it because of the map, and how to fix it?
Thank you...
My css:
.ui-mobile
{
height: 99%;
width: 100%;
}
ui-mobile-viewport.ui-overlay-c
{
height: 99%;
}
#map_canvas
{
height: 99%;
width: 100%;
position: inherit;
}
My Html:
<!DOCTYPE html>
<html class="no-js">
<head>
...
<title>Main Page</title>
</head>
<body>
<div id="MainPage" data-role="page">
<script>
$("#MainPage").live("pageinit", function () { ... });
</script>
<div id="map_canvas">
</div>
</div>
</body>
</html>
If this is not a problem for you take a look at my jQuery solution:
$(window).bind('resize', function () {
var screenHeight= 0;
screenHeight= $('[data-role="page"]').first().height() - $('[data-role="header"]').first().height()- $('[data-role="footer"]').first().height();
$('#map_canvas').css('height',screenHeight - 4);
}).trigger('resize');
Page height - header height - footer height - 4 = content height
I am using - 4 to counter borders. Use only -2 if you have only footer or header. None if you have only map.
For this formula you need a viewpoint meta tag set, because you will get wrong screen sizes.
<meta name="viewport" content="width=device-width, initial-scale=1" />
This is a jsFiddle example: http://jsfiddle.net/Gajotres/HKjEF/
Tested in Win Firefox, iPad Safari, Android 4.1 Chrome environments.
First of all please share HTML code.
For your question : Yes, it may be because of Tool Bars or some other default margin, padding in the page.
You can remove the scroll-bar by setting height as 98% or 99% which ever fix scrolling issue for you.
<html>
<head>
<style>
html{ overflow:hidden;}
body{ overflow:hidden; height:100%; background-color:blue; margin:0px;}
div{ height:3000px; background-color:red; margin:30px;}
</style>
</head>
<body>
<div>dasdasd</div>
</body>
</html>
Here is the html code. When it running on a standard browser, the div tag keep showing in the window.
But it run in ie, when you select the words "dasdasd" and drag down, the body tag will scroll and the words "dasdasd" will hide unless you disable the select function.
Could someone give me other solution?
Like Spudley's answer,the DOCTYPE cause the problem,but when in the standard mode,the body tag still scroll, anyone can solve the problem?
The problem is that you're missing the <!DOCTYPE> declaration.
When IE sees HTML code without a DOCTYPE, it goes into quirks mode.
In quirks mode, the browser is effectively rendering the page to be backward compatible with IE5. It changes the way it renders the basic box layout, and removes support for a lot of standard CSS.
Add the following doctype to the top of your page (above the <html> tag), and you should see things come right:
<!DOCTYPE html>
Try this:
body {
background-color: blue;
height: 100%;
margin: 0 auto;
overflow: auto;
}
div {
background-color: red;
margin: 30px;
overflow: auto;
}
Hope it works...Best Luck.