Skip to content

Fullscreen on chrome doesn't work if you're in iframe and your zoom level is not 100% #2644

@KatVoh

Description

@KatVoh

It seems if you're in an iframe it does this check:

if (t.isInIframe) {
                           setTimeout(function checkFullscreen() {
                                          if (t.isNativeFullScreen) {
						var percentErrorMargin = 0.002,
						    windowWidth = _window2.default.innerWidth || _document2.default.documentElement.clientWidth || _document2.default.body.clientWidth,
						    screenWidth = screen.width,
						    absDiff = Math.abs(screenWidth - windowWidth),
						    marginError = screenWidth * percentErrorMargin;

						if (absDiff > marginError) {
							t.exitFullScreen();
						} else {
							setTimeout(checkFullscreen, 500);
						}
					}
				}, 1000);
			}

The problem being screen.width doesnt change based on zoom, but window.width will so if you arent at 100% zoom, your window.width will never be in the percentErrorMargin.

example:
chrome:
Say at 100% my screen.width is 2560.
My window.innerWidth at a zoom of 100% is 1712, after fullscreen it becomes 2560.
However, zooming out at say, 90% it's 1902, after fullscreen it becomes 2844, which becomes too large, and immediately exits fullscreen.

in firefox:
At 100% my screen.width is 2560.
My window.innerWidth at a zoom of 100% is 1999, after fullscreen it becomes 2560.
At 90% window.innerWidth is 2199, after fullscreen it becomes 2816. The difference is, now the screen.width is 2816, absDiff is 0 and fullscreen works.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions