OLD | NEW |
1 :-webkit-full-screen { | 1 :not(:root):-webkit-full-screen { |
2 background-color: white; | 2 position: fixed !important; |
3 z-index: 2147483647 !important; | 3 top: 0 !important; |
4 } | 4 right: 0 !important; |
5 | 5 bottom: 0 !important; |
6 :root:-webkit-full-screen-ancestor { | |
7 overflow: hidden !important; | |
8 } | |
9 | |
10 :-webkit-full-screen-ancestor:not(iframe) { | |
11 z-index: auto !important; | |
12 position: static !important; | |
13 opacity: 1 !important; | |
14 transform: none !important; | |
15 -webkit-mask: none !important; | |
16 clip: none !important; | |
17 -webkit-filter: none !important; | |
18 transition: none !important; | |
19 -webkit-box-reflect: none !important; | |
20 -webkit-perspective: none !important; | |
21 -webkit-transform-style: flat !important; | |
22 will-change: none !important; | |
23 } | |
24 | |
25 video:-webkit-full-screen, audio:-webkit-full-screen { | |
26 background-color: transparent !important; | |
27 position: relative !important; | |
28 left: 0 !important; | 6 left: 0 !important; |
29 top: 0 ! important; | |
30 margin: 0 !important; | 7 margin: 0 !important; |
| 8 box-sizing: border-box !important; |
31 min-width: 0 !important; | 9 min-width: 0 !important; |
32 max-width: none !important; | 10 max-width: none !important; |
33 min-height: 0 !important; | 11 min-height: 0 !important; |
34 max-height: none !important; | 12 max-height: none !important; |
35 width: 100% !important; | 13 width: 100% !important; |
36 height: 100% !important; | 14 height: 100% !important; |
37 flex: 1 !important; | 15 object-fit: contain !important; |
38 display: block !important; | |
39 transform: none !important; | 16 transform: none !important; |
40 } | 17 } |
41 | 18 |
42 img:-webkit-full-screen { | 19 iframe:-webkit-full-screen { |
43 width: auto; | 20 border: none !important; |
44 height: 100%; | 21 padding: 0 !important; |
45 max-width: 100%; | |
46 } | 22 } |
47 | 23 |
48 iframe:-webkit-full-screen { | 24 :not(:root):-webkit-full-screen::backdrop { |
49 margin: 0 !important; | 25 position: fixed; |
50 padding: 0 !important; | 26 top: 0; |
51 border: 0 !important; | 27 right: 0; |
52 position: fixed !important; | 28 bottom: 0; |
53 min-width: 0 !important; | 29 left: 0; |
54 max-width: none !important; | 30 background: black; |
55 min-height: 0 !important; | |
56 max-height: none !important; | |
57 width: 100% !important; | |
58 height: 100% !important; | |
59 left: 0 !important; | |
60 top: 0 !important; | |
61 } | 31 } |
| 32 |
| 33 /* Anything below are extensions over what the Fullscreen API (29 September 2015
) mandates. */ |
| 34 |
| 35 /* This prevents video from overflowing the viewport in |
| 36 virtual/android/fullscreen/video-scrolled-iframe.html |
| 37 FIXME: We should remove this (see crbug.com/441890). */ |
| 38 :root:-webkit-full-screen-ancestor { |
| 39 overflow: hidden; |
| 40 } |
| 41 |
| 42 /* should I stay or should I go? */ |
| 43 :-webkit-full-screen-ancestor:not(iframe) { |
| 44 will-change: none !important; |
| 45 } |
OLD | NEW |