Position fixed sur chrome pour mobile (e.g. Android)

15 avril 2016 / Marouen Mhiri / CSS

Doing some responsive stuff, we get an interesting use case concerning the width of fixed element on a web page.
The Dev tools show that the header is 480px wide (the min-width of the body) but it will pursue showing it contents if you try to scroll horizontally (In this case the 480px are definitely wrong).

So when you switch to mobile on Dev tools, and due to the fixed position of the header, this one will geht as CSS-width property value the widest element of the page (in this case 500px which represents the width of the first “p” in the footer.

After doing some tests, we realized that the problem occurs on chrome for Android mobiles (may be for some others devices too, you have to try it yourself – the test device should have width < 500px if you use the code on the end of this article). So, the fix is very simple for that: we only need to add a max-width of 100% to the widest element

Nevertheless, I think this still a Bug in the Dev tools but may be I missed some informations concerning this issue, so I’ll be glad to discuss about it.
Voici un exemple de code:

				
<!DOCTYPE html>
<html>
	<head>
		<title>Try</title>
		<meta name="viewport" content="width=device-width" />
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
				min-width: 480px;
				width: 100%;
				height: 100%;
			}

			p {
				margin: 0;
			}

			header {
				position: fixed;
				width: 100%;
				top: 0;
				height: 50px;
				background-color: yellow;
			}

			header h1 {
				margin: 0;
			}

			.content {
				min-height: 1000px;
				background-color: green;
				margin-top: 50px;
			}

			footer {
				background-color: blue;
				height: 100px;
				color: white;
			}
			.footer-item {
				width: 500px;
			}
		</style>
	</head>
	<body>
		<header>
			<h1>Header</h1>
		</header>
		<div class="content">
			<p>Content</p>
			<p>Content</p>
			<p>Content</p>
			<p>Content</p>
			<p>Content</p>
			<p>Content</p>
			<p>Content</p>
			<p>Content</p>
		</div>
		<footer>
			<p class="footer-item">
				Footer first item
			</p>
			<p>
				other footer item
			</p>
		</footer>
	</body>
</html>
				
			

Tags :

cssmobileandroid