| 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: auto !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; | |
| 38 display: block !important; | |
| 39 transform: none !important; | 15 transform: none !important; |
| 40 } | |
| 41 | 16 |
| 42 img:-webkit-full-screen { | 17 /* intentionally not !important */ |
| 43 width: auto; | 18 object-fit: contain; |
| 44 height: 100%; | |
| 45 max-width: 100%; | |
| 46 } | 19 } |
| 47 | 20 |
| 48 iframe:-webkit-full-screen { | 21 iframe:-webkit-full-screen { |
| 49 margin: 0 !important; | 22 border: none !important; |
| 50 padding: 0 !important; | 23 padding: 0 !important; |
| 51 border: 0 !important; | |
| 52 position: fixed !important; | |
| 53 min-width: 0 !important; | |
| 54 max-width: none !important; | |
| 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 } | 24 } |
| 25 |
| 26 /* TODO(foolip): In the spec, there's a ::backdrop block with the properties |
| 27 shared with dialog::backdrop (see html.css). */ |
| 28 :not(:root):-webkit-full-screen::backdrop { |
| 29 position: fixed; |
| 30 top: 0; |
| 31 right: 0; |
| 32 bottom: 0; |
| 33 left: 0; |
| 34 background: black; |
| 35 } |
| OLD | NEW |