Webkit Zoom Bug in Ultimate Fade-In Slideshow

[nrz13]

1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem: when zooming out (negative) at least two zooms on webkit browsers (Chrome, Safari), the descreveal slide-up boxes don't slide up from the bottom, but drop in (very rapidly) from about the middle of the image and fall down.

In FF4b5 and IE8 the boxes slide up from the bottom as intended regardless of the zoom level.

I'm not sure if this is a webkit bug or a bug with the slideshow instructions for webkit browsers.

Tested Chrome 6 & Safari 5 on Windows XP SP3.

[jscheuer1]

I see what you mean. I'm not the author. I am fairly familiar with the script though. This is the sort of thing where it would be easy to blame it on webkit, and that might even be justified. But there might be a solution.

However, the likelihood of someone needing to zoom down two levels on this script is rather remote. Even at that, though disconcerting, it doesn't completely ruin the show.

If it's really that much of a concern, make the descreveal either 'always' or 'none'. Either of these will result in a slideshow that doesn't have the problem you mention. Using browser sniffing (I know, not always the best thing), one can customize which browser gets which sort of descreveal. So the browsers without this problem may use one of the other methods and webkit will get either always or none, example:

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
		["http://i30.tinypic.com/531q3n.jpg"],
		["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: /apple|google/i.test(navigator.vendor)? "always" : "ondemand",
	togglerid: ""
})

Note: With "always" one can still dismiss and recall the description by clicking on the tiny hide and show buttons. This will also give the odd behavior on 2 level zoom out in webkit. But if these images are replaced with transparent images and set to a width and height of 0, that possibility will be eliminated. In the main script:

var fadeSlideShow_descpanel={
	controls: [['x.png',7,7], ['restore.png',10,11], ['loading.gif',54,55]], //full URL and dimensions of close, restore, and loading images
	fontStyle: 'normal 11px Verdana', //font style for text descriptions
	slidespeed: 200 //speed of description panel animation (in millisec)
}

The first is the image used to dismiss descriptions, its width and height. The second is the image used to recall the descriptions, its width and height.

[nrz13]

John:

I agree with you that it would be rare for anyone to encounter the bug on a normal basis and that it's not a showstopper bug, but I did want to report it so the author would be aware of the issue.

The reason I test my websites at different zoom levels is because I assume that a few visitors will be on small-screen devices, such as smart phones and netbooks.