Page MenuHomePhabricator

Fullscreen image transition doesn't work in Safari 8
Closed, DeclinedPublic

Description

Author: dschulze

Description:
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.


Version: unspecified
Severity: normal

Details

Reference
bz67119

Event Timeline

bzimport raised the priority of this task from to Needs Triage.Nov 22 2014, 3:41 AM
bzimport added a project: MediaViewer.
bzimport set Reference to bz67119.
bzimport added a subscriber: Unknown Object (MLST).

(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?

dschulze wrote:

(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 :)

dschulze wrote:

(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

Gilles subscribed.

Mass-removing the Multimedia tag from MediaViewer tasks, as this is now being worked on by the Reading department, not Editing's Multimedia team.

matmarex subscribed.

We no longer support JavaScript-based tools, including MultimediaViewer, on Safari 8. Safari 11.3+ is currently required (https://www.mediawiki.org/wiki/Compatibility#Browser_support_matrix).