Problem with fullscreen feature with Web Component/Shadow DOM

I created a custom element using openseadragon displayed in a <div> works perfectly as long as do not move the Image I can display Images sequences , collections and zoom in and out, but when move the image, it still works but is not displaye in the <div> anymore, it seems that it is reinjected somewhere else and displayed “fullpage” in the browser.

---

The togglebutton works but getting back is a complete mess

Here is a test page ( Zoomify tab )

http://prenomsfrancais.free.fr/showcase/s0.html

[msalsbery]

@PCailly

For what it’s worth, here’s an example of what has worked well for me across user agents. Never used in shadow DOM though, but I would expect my user agent to handle it correctly because, as we all know, all browsers act the same ;-D

Note: The important thing here is the extra OpenSeadragon DIV with width and height 100%. The DIV with the class “viewer-container” would be your DIV that has a height 100vh. Using two DIVs, one with overflow:hidden and one with width/height 100%, seems to contain the OpenSeadragon viewer correctly across all browsers I’ve tested

	<div class="viewer-container">
		<div id="osd" class="openseadragon"></div>
	</div>

.viewer-container
{
	/*
	this really should be something like calc(100vh - 90px)
	so the DIV doesn't extend outside the viewport
	*/
	height: 100vh;
	overflow: hidden;
}

.openseadragon
{
	height: 100%;
	width: 100%;
}

	var viewer = OpenSeadragon({
		id: 'osd',
		...
	});

If there’s dev tools with DOM element inspector available on the browser(s) it’s not working in, you should be able to see what element is covering the header row elements. I’d bet it’s the OpenSeadragon canvas…

[msalsbery]

I agree that the 100vh trick is a hack

@PCailly

I don’t understand what the “trick” is. To me all that does is obscure (off the bottom of the viewport) part of the 100vh height element. You can see this on an iPhone, for example, which lets you scroll your vertically-oversized viewport (100vh + the heights of the two header rows) into view.

For the issue, the only thing that “should” be happening when you click or zoom on the image is either the OpenSeadragon canvas “moves” (drag/pan), or in the case of a click, it zooms which increases the canvas size. Depending on the user agent and/or your CSS/styles, the OpenSeadragon canvas change may be displayed over the top of neighbor elements. Have you tried setting the OpenSeadragon containing DIV’s overflow to hidden?