requestFullscreen in Chrome: image remains small

Question

I'm following this great tutorial from SitePoint to implement fullscreen-on-click on some images of my site.

My code is very similar to the example provided by SitePoint, but here is my code:

HTML

<figure class="fullscreenOnClick">
    <img src="https://dw-uploads.s3.eu-central-1.amazonaws.com/photos/originals/359c0687ae12e32bb5f26f2005763b73">
</figure>

JS

$('.fullscreenOnClick').on('click', function(e) {
    e.preventDefault;

    var elem = this;
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
        elem.webkitRequestFullscreen();
    } else {
        alert("Sorry, your browser is too old and doesn't support fullscreen :-(")
    }
});

http://jsfiddle.net/xnyj9wr5/ (not working - again, see SitePoint example)

The problem

My problem is that Firefox and IE display the fullscreen image as I expect: the image gets shown in its original size, centered.

Chrome is causing the issue: the image just get centered on the black background, keeping its current size.

How can I get Chrome to do fullscreen like Firefox and IE?

Please note: I must apply the fullscreen effect to the outer element, not to the img itself, because otherwise the image gets stretched.

Answer 1

Your figure element has a style of width: 30% on it. That is causing the problem in Chrome.

According to MDN under the section "Presentation Differences":

It's worth noting a key difference here between the Gecko and WebKit implementations at this time: Gecko automatically adds CSS rules to the element to stretch it to fill the screen: "width: 100%; height: 100%". WebKit doesn't do this; instead, it centers the fullscreen element at the same size in a screen that's otherwise black. To get the same fullscreen behavior in WebKit, you need to add your own "width: 100%; height: 100%;" CSS rules to the element yourself:

#myvideo:-webkit-full-screen { width: 100%; height: 100%; }

On the other hand, if you're trying to emulate WebKit's behavior on Gecko, you need to place the element you want to present inside another element, which you'll make fullscreen instead, and use CSS rules to adjust the inner element to match the appearance you want.

I was able to add the suggested css using Chrome's developer tools to the squirrel picture you linked in the comments and it showed up the correct size. However, it did have a white box around it (which appears to be coming from the figure element).

I would try changing your javascript as @AdamFischer suggests to make the image itself fullscreen instead of the figure tag and add the appropriate css. If this is not an option, you can apply the css to the figure element and then adjust as necessary to get the look you want. (Note that it is webkit specific css so it shouldn't interfere with other browsers.) I also had some success wrapping the figure in another element (like a span or div) and applying the fullscreen css to that and removing the width:30% from the figure.

Answer 2

For the main div give styles

#maindiv:-webkit-full-screen {   min-width: 100%;   min-height: 100%; }

give same styles to image tag.try by changing min-width and height properties to width and height.

Answer 3

Selected element after onclick event is not the image, but figure tag.

Just update your javascript code to:

$('img').on('click', function(e) {
    e.preventDefault;

    var elem = this;
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
        elem.webkitRequestFullscreen();
    } else {
        alert("Sorry, your browser is too old and doesn't support fullscreen :-(")
    }
});

http://fiddle.jshell.net/xnyj9wr5/2 .

(Fullscreen mode will not work inside frame, so here is link for result http://fiddle.jshell.net/xnyj9wr5/2/show/ )

Please note that requestFullscreen() is deprecated on insecure origins, and support will be removed in the future. You should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.

https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins

Edit: On your example website, http://blogs.sitepointstatic.com/examples/tech/full-screen/index2.html

max-width: 100%;

is the problem. Remove this rule, and image resize as desired. If needed, you should try removing this rule with js after click event triggered. Or bind it to requestfullscreen event.

Answer 4

I think it is related with the default user-agent styles. You can center the image only when you are in fullscreen. Try this css:

.fullscreenOnClick:-webkit-full-screen img {
    display: block;
    margin: 0 auto;
}