| OLD | NEW |
| 1 :not(:root):-webkit-full-screen { | 1 :-webkit-full-screen { |
| 2 position: fixed !important; | 2 background-color: white; |
| 3 top: 0 !important; | 3 z-index: 2147483647 !important; |
| 4 right: 0 !important; | 4 } |
| 5 bottom: 0 !important; | 5 |
| 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; |
| 6 left: 0 !important; | 28 left: 0 !important; |
| 29 top: 0 ! important; |
| 7 margin: 0 !important; | 30 margin: 0 !important; |
| 8 box-sizing: border-box !important; | |
| 9 min-width: 0 !important; | 31 min-width: 0 !important; |
| 10 max-width: none !important; | 32 max-width: none !important; |
| 11 min-height: 0 !important; | 33 min-height: 0 !important; |
| 12 max-height: none !important; | 34 max-height: none !important; |
| 13 width: 100% !important; | 35 width: 100% !important; |
| 14 height: 100% !important; | 36 height: 100% !important; |
| 15 object-fit: contain !important; | 37 flex: 1 !important; |
| 38 display: block !important; |
| 16 transform: none !important; | 39 transform: none !important; |
| 17 } | 40 } |
| 18 | 41 |
| 19 iframe:-webkit-full-screen { | 42 img:-webkit-full-screen { |
| 20 border: none !important; | 43 width: auto; |
| 21 padding: 0 !important; | 44 height: 100%; |
| 45 max-width: 100%; |
| 22 } | 46 } |
| 23 | 47 |
| 24 /* TODO(foolip): In the spec, there's a ::backdrop block with the properties | 48 iframe:-webkit-full-screen { |
| 25 shared with dialog::backdrop (see html.css). */ | 49 margin: 0 !important; |
| 26 :not(:root):-webkit-full-screen::backdrop { | 50 padding: 0 !important; |
| 27 position: fixed; | 51 border: 0 !important; |
| 28 top: 0; | 52 position: fixed !important; |
| 29 right: 0; | 53 min-width: 0 !important; |
| 30 bottom: 0; | 54 max-width: none !important; |
| 31 left: 0; | 55 min-height: 0 !important; |
| 32 background: black; | 56 max-height: none !important; |
| 57 width: 100% !important; |
| 58 height: 100% !important; |
| 59 left: 0 !important; |
| 60 top: 0 !important; |
| 33 } | 61 } |
| 34 | |
| 35 /* Anything below are extensions over what the Fullscreen API (3 May 2016) manda
tes. */ | |
| 36 | |
| 37 /* This prevents video from overflowing the viewport in | |
| 38 virtual/android/fullscreen/video-scrolled-iframe.html (crbug.com/441890) and | |
| 39 removes scrollbars caused by html { overflow: scroll } (crbug.com/543946). | |
| 40 TODO(foolip): This is done differently in Gecko, find a fix not involving the | |
| 41 ancestor selector in https://github.com/whatwg/fullscreen/issues/19. */ | |
| 42 :root:-webkit-full-screen-ancestor { | |
| 43 overflow: hidden !important; | |
| 44 } | |
| OLD | NEW |