By setting a css 'height' property on a parent container 'foo' the calculated 'font-size' of the inner elements changes wrongly. This happens only on a mobile device on Chrome.
To test this please try to run the following code under Chrome and choose any mobile device in the developer console:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
.foo {
height: 600px;
color: white;
background: teal;
}
</style>
</head>
<body>
<section>
<h2>Header in first section</h2>
<p>Text with a normal size. Text with a normal size.</p>
</section>
<section class="foo">
<h2>Header in second section</h2>
<p>This text changes size when commenting out 'foo's height property in the Chrome developer console and mobile mode (e.g Galaxy S5) - but why?</p>
</section>
</body>
</html>
Then disable (comment out) the 'height' property on the class 'foo'. The calculated 'font-size' for the p-element should not change but it does.
Chrome also shows the wrong size when commenting out the 'height' property in the document itself and reloading the page (-> then the text in both p-element is bigger than normal).
Please help me out - is this a bug that needs to be reported?
It seems this is a known problem how mobile browsers handle text sizing. See text-size-adjust. There are several options for this:
<meta name="viewport" content="width=device-width, initial-scale=1">
Working with the experimental property
Setting a min-height of 1px or max-height of 99999. It seems that this will break layout on some mobile devices. (See post: Chrome on android resizes font)
Related
Below is a simple HTML page that renders very differently in Chrome and Firefox. It looks like Chrome has a bug. I tried hard but could not find a workaround to make it work in Chrome. My best attempt was wrapping the img in a div with a height, but it does not work nicely when the size of the picture is limited by the width of the browser. Could you suggest a workaround to make it work in Chrome?
To clarify: in Chrome, if I make the browser window very wide, the picture will take the full width, and become taller than the screen. In Firefox, the paragraph below the picture remains visible, which is what I want to obtain. How can I make it work in Chrome?
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Magic</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
<body>
<div style="display:flex;flex-direction:column;max-height:100vh">
<h1>Title of the page that works in Firefox but not Chrome</h1>
<img alt="goban" style="margin:auto;height:auto;width:auto;max-height:100%;max-width:100%;" src="https://www.schaakengo.nl/images/productimages/big/goban-13x13-licht-2-.jpg">
</img>
<p>This paragraph should be visible, together with the image and the title.</p>
</div>
<h2>This does not have to fit vertically in the page</h2>
<p>This works in Firefox but not Chrome. In Chrome, if I make the browser window very wide, the picture will take the full width, and become taller than the screen. In Firefox, the paragraph below the picture remains visible, which is what I want to obtain.
How can I make it work in Chrome?</p>
</body>
</html>
I don't think it will work with an image tag, but you can apply it as a background-image to a DIV and use background-size: contain; (to make sure the whole image is always displayed without anything being cut off) and flex-grow: 1; (to allow the empty container to gain height) on it:
body {
margin: 0;
}
.outer_div {
display: flex;
flex-direction: column;
height: 100vh;
}
.img_container {
background: url(https://www.schaakengo.nl/images/productimages/big/goban-13x13-licht-2-.jpg) center center no-repeat;
background-size: contain;
flex-grow: 1;
}
<div class="outer_div">
<h1>Title of the page that works in Firefox but not Chrome</h1>
<div class="img_container"></div>
<p>This paragraph should be visible, together with the image and the title.</p>
</div>
<h2>This does not have to fit vertically in the page</h2>
<p>This works in Firefox but not Chrome. In Chrome, if I make the browser window very wide, the picture will take the full width, and become taller than the screen. In Firefox, the paragraph below the picture remains visible, which is what I want to obtain.
How can I make it work in Chrome?</p>
Here's the extremely simple HTML page
<body style="overflow-y: hidden">
...
</body>
The expected behavior of this page is: scrolling of a document is prevented because of overflow-y: hidden.
It works as expected (scrolling is prevented) everywhere except Safari.
Live demo: https://spotted-chime.glitch.me/
The question is: how to make Safari behave the same way as other browsers?
Just use overflow: hidden and it will work.
Alternatively, you can try using position: fixed on the <body> tag as well.
(NOTE: Using this approach, the body will scroll to the top as by default the top: 0.)
EDIT: For safari mobile devices, you need to use Javascript events. Explained in this answer.
https://stackoverflow.com/a/4770179/2860486
Position fixed is meant to create a div that stays in the same position on the screen while the content behind it is scrolled down.
fixed
The element is removed from the normal document flow, and no
space is created for the element in the page layout. It is positioned
relative to the initial containing block established by the viewport,
except when one of its ancestors has a transform, perspective, or
filter property set to something other than none (see the CSS
Transforms Spec), in which case that ancestor behaves as the
containing block. (Note that there are browser inconsistencies with
perspective and filter contributing to containing block formation.)
Its final position is determined by the values of top, right, bottom,
and left.
This value always creates a new stacking context. In printed
documents, the element is placed in the same position on every page.
Have you tried changing it to absolute?
body {
overflow-y: hidden;
}
#backdrop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, .2);
border: 5px dashed black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="backdrop">
</div>
<div>0%</div>
<div>1%</div>
<div>2%</div>
<div>3%</div>
<div>4%</div>
<div>5%</div>
<div>6%</div>
<div>7%</div>
<div>8%</div>
<div>9%</div>
<div>10%</div>
<div>11%</div>
<div>12%</div>
<div>13%</div>
<div>14%</div>
<div>15%</div>
<div>16%</div>
<div>17%</div>
<div>18%</div>
<div>19%</div>
<div>20%</div>
<div>21%</div>
<div>22%</div>
<div>23%</div>
<div>24%</div>
<div>25%</div>
<div>26%</div>
<div>27%</div>
<div>28%</div>
<div>29%</div>
<div>30%</div>
<div>31%</div>
<div>32%</div>
<div>33%</div>
<div>34%</div>
<div>35%</div>
<div>36%</div>
<div>37%</div>
<div>38%</div>
<div>39%</div>
<div>40%</div>
<div>41%</div>
<div>42%</div>
<div>43%</div>
<div>44%</div>
<div>45%</div>
<div>46%</div>
<div>47%</div>
<div>48%</div>
<div>49%</div>
<div>50%</div>
<div>51%</div>
<div>52%</div>
<div>53%</div>
<div>54%</div>
<div>55%</div>
<div>56%</div>
<div>57%</div>
<div>58%</div>
<div>59%</div>
<div>60%</div>
<div>61%</div>
<div>62%</div>
<div>63%</div>
<div>64%</div>
<div>65%</div>
<div>66%</div>
<div>67%</div>
<div>68%</div>
<div>69%</div>
<div>70%</div>
<div>71%</div>
<div>72%</div>
<div>73%</div>
<div>74%</div>
<div>75%</div>
<div>76%</div>
<div>77%</div>
<div>78%</div>
<div>79%</div>
<div>80%</div>
<div>81%</div>
<div>82%</div>
<div>83%</div>
<div>84%</div>
<div>85%</div>
<div>86%</div>
<div>87%</div>
<div>88%</div>
<div>89%</div>
<div>90%</div>
<div>91%</div>
<div>92%</div>
<div>93%</div>
<div>94%</div>
<div>95%</div>
<div>96%</div>
<div>97%</div>
<div>98%</div>
<div>99%</div>
<div>100%</div>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
</body>
</html>
Try this:
<head>
<style>
.forSafari::-webkit-scrollbar { width: 0 !important }
</style>
</head>
<body style="overflow-y: hidden" class="forSafari">
...
</body>
just use "position: relative" or fixed it will resolve the problem
I must be missing something obvious, but here it comes... I just want to establish a narrow viewport width (320px) on my browser to check / design the web layout for a mobile phone display. Why is it that if set a viewport width with the meta tag, the browser doesn't respect it? This is what I do:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=320px" />
<style>
.content {
width: 100vw;
background-color: yellow;
}
</style>
</head>
<body>
<div class="content">
<p> Hello, this is the 'content' </p>
</div>
</body>
</html>
It just doesn't matter what size I put in the tag, it just seems to use the native display size. Can anybody tell me what the problem is and how to actually do it?
You don't need to set a viewport to check mobile compatibility. Just, click F + 12 keys in your browser chrome, and click on the mobile devices icon. This way you can select any viewport profile and check your design. See the image below:
I have this minimal code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width height=device-height">
<title>test</title>
<style>
html, body {
height: 100%
}
#container {
height: 100%;
background-color: #0f0;
}
</style>
</head>
<body>
<div id="container"> </div>
</body>
<script type="text/javascript">
alert(window.getComputedStyle(document.getElementById('container')).height);
</script>
</html>
on a server at:
http://catplusplus.org.uk/catpsite/portfolio/test.html
so this code will alert the height of the container div which should be 100% of the browser window.
I've included the meta-viewport tag in the header which should ensure mobile zooming is set to 1:1 in terms of pixels.
when I load this on a LG nexus 4 running android on Chrome I get a height of 519px in portrait and 311px in landscape - which I think is pretty much right (screen size minus UI etc)
when I load this on the same phone using Firefox (v23) I get a height of 1134px in portrait and 718px in landscape, this seems wrong.
Is this a known issue, am I missing something simple, can someone fill the gap in my knowledge here please?
Thanks
James
p.s. just tested on Safari on iPhone 4 also seems off, reporting 540px for both portrait and landscape....
Help! This box is exactly the same size as the length of the text at 100% zoom on IE and Chrome. But, when viewed on my mobile phone, the box overhangs the length of the text. Is it possible to fix this?
<style type="text/css">
#box{
width:375px;
background:blue;
font-size:16px;
font-family:Courier New, Courier, monospace;
}
#textbox{
background:pink;
font-size:16px;
font-family:Courier New, Courier, monospace;
}
</style>
<html>
<head>
<div id="box">Box</div>
<div id="textbox">|1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ|</div>
</head>
</html>
Firstly, browsers will interpret font widths differently. Relying on the width of fonts is not ideal.
Instead, if you want the boxes to match the same width, wrap a <div> around them and set it.
<div class="wrapper">
<div id="box">Box</div>
<div id="textbox">|1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ|</div>
</div>
A couple other problems with the code you posted.
You must put your embedded styles inside of the head tags.
You must never put anything before the <html> tag except <!doctype>
Never put <div>'s inside of a head. They only belong in the <body>
The <head> is used to initialize data. The <body> is used to display data.