-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex-wrong.html
60 lines (52 loc) · 1.74 KB
/
index-wrong.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<html>
<head>
<style>
body {
/* cover sized and fixed backgrounds are handled wrongly in iOS */
background: url(https://newevolutiondesigns.com/images/freebies/nature-hd-background-9.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
p, pre {
background-color:rgba(255,255,255,0.9);
margin: 10px 20px;
padding:10px;
}
p.long {
height:2000px;
}
</style>
</head>
<body>
<p>
Background-image size fixed cover which doesn't work properly on iOS, since it uses the height of the document and not the viewport.
</p>
<pre>
body {
/* cover sized and fixed backgrounds are handled wrongly in iOS */
background: url(https://newevolutiondesigns.com/images/freebies/nature-hd-background-9.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</pre>
<p>
<a href="https://thesved.github.io/fixed-cover-background/">Click here</a> for the solution.
</p>
<p>
<a href="https://github.com/thesved/fixed-cover-background" target="_blank">See Github repo</a>
</p>
<p>
More info <a href="http://stackoverflow.com/questions/24154666/background-image-size-cover-not-working-on-ios/43058483#43058483" target="_blank">at stackoverflow.com</a>
</p>
<p>
Live demo at <a href="https://www.doklist.com/" target="_blank">Doklist.com</a>, <a href="https://www.doklist.com.br/" target="_blank">Doklist.com.br</a>
</p>
<p class="long">
A very long paragraph to test how well this solution works.
</p>
</body>
</html>