Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Safari Bug - tiled images outside of viewport

See original GitHub issue

Hi,

I’m having an issue that seems to affect only Safari (using 10.1.1) and I think Edge too, but I’ve not tested as thoroughly on Edge yet.

I’m using addTiledImage for several images to create a sort of zoomable carousel. This is working great on Chrome and Firefox. Last I tested on IE11 it was okay too.

On Safari however, when zooming in and out, images will disappear and reappear. As far as I can tell if the image would be entirely in the viewport/canvas, it displays, the moment it hits the edge of the canvas, either by panning or by zooming, it seems to disappear entirely.

What should happen is it should just be clipped by the viewport.

I’ve stripped down our working site to the bare minimum to demonstrate the problem here:

http://files.onedarnleyroad.com/safari.html

Try in Safari, then in Chrome and see the difference. Use the input range to change zoom

Full source code of that link is here, aside from the CDN links and refs to placehold.it, it should work as is:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1">
<title>Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openseadragon/2.2.1/openseadragon.js"></script>
<script>
$(function() {

	var heroZoom = OpenSeadragon({
		id: 					'heroZoom',
		prefixUrl: 				'',
		showNavigationControl: 	false,
		showNavigator: 			false,
		defaultZoomLevel: 		0.5,
		gestureSettingsMouse: {
			scrollToZoom: 		false,
			clickToZoom: 		false
		},
		visibilityRatio: 		1,
		mouseNavEnabled: 		false,
		// collectionMode:			true,
		// collectionRows:			1,
		// collectionTileSize:		1,
		// collectionTileMargin: 	config.tileMargin,
		// Initialise with a transparent spacer
		tileSources: 			[ {
				type:"image",
				url: 'http://placehold.it/1/ffffff/ffffff'
		} ]
	});

	var xOffset = 1.1;

	// This is adapted from our CMS output:
	[0,1,2,3,4,5,6].forEach(function( i ) {

		// First add a low image
		heroZoom.addTiledImage({
			tileSource: {
				type: "image",
				url: "http://placehold.it/3000x3000"
			},
			x: xOffset * (i),
			y: 0,
			width: 1,
			opacity: 1,
			index: 1,
			collectionImmediately: true,
			success: function( t ) {

			}
		});
	});

	var $zoomSlider = $('#carouselZoomControls');
	$zoomSlider.on('input', function(e) {
		heroZoom.viewport.zoomTo( $(this).val() / 100 );
		$('#carouselZoomControlsAmount').text( $(this).val() );
	});

});

</script>
</head>

<body>
	<div style="width: 100%; height: 90vh;" id="heroZoom"></div>
	<div class="interface">
		<input type="range"
			id="carouselZoomControls"
			min="1"
			max="100"
			value="50"
			step="1"
			aria-valuemin="1"
			aria-valuemax="100"
			aria-valuenow="50">
		<output  class='visually-hidden' for="carouselZoomControls" id="carouselZoomControlsAmount">50</output>
	</div>
	</div>
</body>
</html>

Issue Analytics

State:
Created 6 years ago
Comments:5 (4 by maintainers)

Top GitHub Comments

1reaction

iangilmancommented, Jun 16, 2017

@nathanedwards Okay, I think I’ve fixed it… please try #1222.

0reactions

iangilmancommented, Jun 16, 2017

Excellent… thank you for confirming, and reporting in the first place 😃

Top Results From Across the Web

Safari on iOS sometimes loses images outside of the viewport

Zooming out reveals images outside of viewport have emptied. Sometimes they reload, sometimes they don't. Over time increasing numbers of "unloaded" images fail ......

safari not loading images outside viewport - Stack Overflow

safari not loading images outside viewport · using hammer.js for the gallery · view has position: fixed.

Safari Not Loading Images Outside Viewport - ADocLib

Follow These Quick Tips To Get Safari Showing Images Again Clear Safari's history Empty Safari's ... Safari Bug tiled images outside of viewport...

iOS Safari not loading tiles in bottom half of viewport - Site Feedback ...

On iOS, Safari won't load map tiles in the bottom half of the viewport. It isn't until I drag any small portion of...

200764 – Main implementation for lazy image loading

Note that https://bugs.webkit.org/show_bug.cgi?id=200662 should probably ... Ideally we'd kick off image loads at the same time we make tiles for a region.