Why does transform: translateX affect a fixed element's height on mobile?
Question
Just now I ran into a weird probelm, I have a fixed element with height:100% . Everything works well until I open Chrome Dev Tool and enter the mobile debug mode .I found in mobile debug mode the fixed element's height will not 100% but a little overflows. After my repeated debugging, I found the sibling's translateX property affects the fixed element's height. And when I tweak the value of translateX property, the height of the fixed element changes too. I simplified it into the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Fixed Element Height Not 100%</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
body {
overflow: hidden;
}
.a {
transform: translateX(100px);
width: 100%;
height: 200px;
}
.b {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
Could someone tell me that whether this is expected or not ? If this is expected and what causes this ?
2 answers
solution1
2 2019-08-28 07:44:05
Remove 2nd body tag CSS, which is overflow:hidden and add that property to first body tag CSS, following code will help you.
body {
height: 100%;
width: 100%;
overflow: hidden;
}
solution2
1 2019-08-28 07:44:36
not sure but try to use vh instead of %
thinks this article would be very interesting aswell for this matter:
https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.