Last modified: 2014-06-28 21:22:43 UTC
The MultimediaViewer uses an inline SVG element to preserve the viewport height of images during a transition from window to fullscreen: <div class="mw-mmv-wrapper"> <div class="mw-mmv-main"> <div class="mw-mmv-pre-image"></div> <div class="mw-mmv-image-wrapper"></div> <div class="mw-mmv-post-image"></div> <svg> <filter></filter> </svg> </div> </div> MultimediaViewer is relying on an old issue of WebKit where an <svg> without given size always has the height of the viewport. This issue was fixed and therefore the transition to fullscreen is broken in latest WebKit nightly builds and Safari 8. A fix for that is to set the height of the svg as well as the height of the containing block <div class="mw-mmv-wrapper"> and <div class="mw-mmv-main"> to 100%: <div class="mw-mmv-wrapper" style="height: 100%"> <div class="mw-mmv-main" style="height: 100%"> <div class="mw-mmv-pre-image"></div> <div class="mw-mmv-image-wrapper"></div> <div class="mw-mmv-post-image"></div> <svg style="height: 100%"> <filter></filter> </svg> </div> </div> This makes the transition work again for Safari 8 as well as for older WebKit based browsers.
(In reply to Dirk Schulze from comment #0) > The MultimediaViewer uses an inline SVG element to preserve the viewport > height of images during a transition from window to fullscreen: Not sure if it is intended to do that; as far as I know, it is only used for the blur effect while the page is loading (and only on Firefox IIRC, webkit can do it from CSS). It's not clear to me from the description what the actual bug is; can you clarify?
(In reply to Tisza Gergő from comment #1) > It's not clear to me from the description what the actual bug is; can you > clarify? In Safari, switching from window to fullscreen has a nice transition where the page with the centered image scales to the fullscreen. In Safari 8 this is broken: During the transition, the page gets reduced to a height of 150px and a 150px height stripe of the page translates from the top to the middle of the screen. The page stays 150px height during the whole transition. After the transition, the page and image are scaled to the correct size and 100% height of the screen. While the SVG bug might not intentionally be used, so far just the 100% viewport height bug of <svg> elements made it look correctly. If no size is specified, the SVG is sized 150x300 px (just like HMTL Canvas) now. That explains what you see the stripe above. You can always test it with a WebKit nightly: http://nightly.webkit.org (OS X required).
Change 142486 had a related patch set uploaded by Gergő Tisza: Set height:100% on blur filter to improve Safari fullscreen transition https://gerrit.wikimedia.org/r/142486
I'll admit I didn't understand any of that, and I am highly sceptical the SVG has anything to do with that, nor do I think a height: 100% rule will actually change its size (since the parent has a small height as well). But at least it doesn't seem to do any harm on other browsers; can you test the patch? (In reply to Dirk Schulze from comment #2) > You can always test it with a WebKit nightly: http://nightly.webkit.org (OS > X required). Yeah, that last part is the problem :)
(In reply to Gerrit Notification Bot from comment #3) > Change 142486 had a related patch set uploaded by Gergő Tisza: > Set height:100% on blur filter to improve Safari fullscreen transition > > https://gerrit.wikimedia.org/r/142486 The containing block of the SVG and its containing block must be 100% as well, see my comment #2. It is probably solvable even without taking care of the SVG.
(In reply to Dirk Schulze from comment #5) > The containing block of the SVG and its containing block must be 100% as well That makes more sense, since the SVG's containing block is the one on which requestFullscreen() gets called. Unfortunately it needs to be significantly larger than screen size, at least in non-fullscreen mode, since it contains all the metadata that's initially off the screen. Maybe changing it to fixed positioning just before it gets fullscreened could work; I'll leave this to people with access to a Mac.
Change 142486 abandoned by Gergő Tisza: Set height:100% on blur filter to improve Safari fullscreen transition Reason: Didn't work; probably the parent needs to be full height, and that's trickier to achieve. https://gerrit.wikimedia.org/r/142486
