Drupal CMS, Zoomify und der IE (10) - so erspart Ihr Euch sehr viele Probleme

In einem Kundenprojekt hatten wir gerade extrem fiese Probleme mit der Bilder Zoom Library Zoomify unter Verwendung des IE (10). Ich möchte Euch gerne an den Ursachen teilhaben lassen, damit Ihr Euch viel Ärger erspart.

Problem:

Im IE 10 wird der "Navigator" (kleines Vorschaubild zur Orientierung) von Zoomify auf einer Drupal 7 Website nicht angezeigt. Sämtliche anderen Browser arbeiten einwandfrei damit.

Ursache:

Wir setzten "Adaptive Theme" als Grundlage unserer Entwicklungen ein. Dieses verwendet ein sog. "CSS Reset", in welchem der folgende Codeschnippsel enthalten ist:

img {
height: auto;
}

Und genau da liegt das Problem! IE10 + Zoomify kommen damit nicht klar. Vermutlich, weil die Höhe des Bildes damit für den IE nicht mehr berechenbar ist.

Lösung:

Einfach für diesen speziellen Fall den "auto"-Wert des img überschreiben:

#navigatorImageContainer img {
height: inherit;
}

Diese Ursache zu finden hat mich verdammt viele graue Haare gekostet, da das Debugging im IE10 mit canvas-Elementen quasi unmöglich ist. Vermutlich der nervigste Fehler seit mehreren Jahren... ;)

PS: Der IE10 kommt übrigens auch nicht mit relativen Breiten für Zoomify klar - während es in allen anderen Browsern super klappt! Traurig! Auch da hilft nur ein Workaround:

jQuery(window).load(function() {
jQuery('#zoomify').children().width('100%');
jQuery('.zoomify').children().height(imgHeightAbs);
var viewerW = Z.Viewport.getW();
var viewerH = Z.Viewport.getH();
var ratio = viewerW / viewerH;

//#webksde#JP20130726: Breite mobilgeraetefaehig errechnen.
var imgWidthAbs = jQuery("#main-content").width();
var imgHeightAbs = (imgWidthAbs / ratio);
Z.Viewer.setSizeAndPosition(imgWidthAbs, imgHeightAbs, 0, 0, true);
});

UPDATE:

Hier das vollständige, zugegeben nicht sonderlich ruhmreiche Script, das immerhin ein akzeptables Ergebnis auf Mobilgeräten zaubert... ich hoffe auf eine bessere Lösung und entsprechende API-Optimierungen bei Zeiten. Hier sind zahlreiche Detailprobleme eingeflossen:

function _init_zoomify_resize() {
jQuery(window).load(function() {
setTimeout(function() {
_zoomify_resize();
}, 2000);
});

jQuery(window).on("orientationchange", function(event) {
_zoomify_resize();
});
}

function _zoomify_resize() {
var viewerW = Z.Viewport.getW();
var viewerH = Z.Viewport.getH();
var ratio = viewerW / viewerH;

//#webksde#JP20130726: Breite mobilgeraetefaehig errechnen.
var imgWidthAbs = Math.round(jQuery("#main-content").width());
var imgHeightAbs = Math.round((imgWidthAbs / ratio));
jQuery('.zoomify').children().width(imgWidthAbs + 'px');
jQuery('.zoomify').children().height(imgHeightAbs + 'px');

Z.Viewer.setSizeAndPosition(imgWidthAbs, imgHeightAbs, 0, 0, true);
Z.Viewer.setImagePath(Z.imagePath);

setTimeout(function() {
if (imgWidthAbs = 300) {
Z.Navigator.setVisibility(false);
Z.Toolbar.setVisibility(false);
} else {
Z.Navigator.setVisibility(true);
Z.Toolbar.setVisibility(true);
}
}, 1000);
}