View Issue Details

Jump to Notes
IDProjectCategoryView StatusDate SubmittedLast Update
0001397OXID eShop (all versions)1.01. Products (product, categories, manufacturer, promotions etc.)public2009-10-16 15:182012-12-07 14:29
ReporterSpritje Assigned To 
PriorityhighSeverityminorReproducibilitysometimes
Status resolvedResolutionfixed 
Product Version4.1.6 revision 22740 
Fixed in Version4.4.0 revision 28699 
Summary0001397: In safari browser the zoom pictures were only shown with scrollbars
DescriptionOn oxid demo shop go to the article Dagger "Snake Queen"
Art.Nr.: 5067 and click on zoom picture.

In safari browser the zoom pictures were only shown with scrollbars

For more infos see pictures attached
TagsProducts
Attached Files
safari.jpg (16,252 bytes)   
safari.jpg (16,252 bytes)   
img_zoom.txt (472 bytes)    
Index: out/basic/src/oxid.js
===================================================================
--- out/basic/src/oxid.js
+++ out/basic/src/oxid.js
@@ -326,7 +326,10 @@
     // switch image src
     image: function(id,src){
         var _el = document.getElementById(id);
-        if( _el ) { _el.src=src; }
+        if( _el ) { 
+            _el.src="";
+            _el.src=src; 
+        }
     },
 
     password: function(user_el,password_el,name) {
img_zoom.txt (472 bytes)   
img_zoom2.txt (1,372 bytes)    
### Eclipse Workspace Patch 1.0
#P oxid_ce_svn
Index: out/basic/src/oxid.js
===================================================================
--- out/basic/src/oxid.js	(revision 256)
+++ out/basic/src/oxid.js	(working copy)
@@ -183,6 +183,12 @@
                     maxHeight = document.documentElement.clientHeight;
                 }
 
+                if ((newWidth > maxWidth || newHeight > maxHeight)) {
+                    _el.style.overflow ='auto';
+                }
+                else {
+                    _el.style.overflow ='hidden';
+                }
                 if(newWidth > maxWidth){ newWidth = maxWidth;}
                 if(newHeight > maxHeight){ newHeight = maxHeight;}
 
@@ -326,9 +332,16 @@
     // switch image src
     image: function(id,src){
         var _el = document.getElementById(id);
-        if( _el ) { _el.src=src; }
-    },
-
+        if( _el ) { 
+            var preloader = new Image();
+            preloader.src=src; 
+            preloader.onload = function() {
+                _el.src=preloader.src; 
+                preloader.onload = null;
+                preloader = null;
+            };
+        }
+     },
     password: function(user_el,password_el,name) {
         var _u = document.getElementById(user_el);
         var _p = document.getElementById(password_el);
img_zoom2.txt (1,372 bytes)   
img_zoom3.txt (1,519 bytes)    
Index: eshop/out/basic/src/oxid.js
===================================================================
--- eshop/out/basic/src/oxid.js	(revision 265)
+++ eshop/out/basic/src/oxid.js	(working copy)
@@ -200,6 +200,12 @@
                     maxHeight = document.documentElement.clientHeight;
                 }
 
+                if ((newWidth > maxWidth || newHeight > maxHeight)) {
+                    _el.style.overflow ='auto';
+                }
+                else {
+                    _el.style.overflow ='hidden';
+                }
                 if(newWidth > maxWidth){ newWidth = maxWidth;}
                 if(newHeight > maxHeight){ newHeight = maxHeight;}
 
@@ -343,9 +349,21 @@
     // switch image src
     image: function(id,src){
         var _el = document.getElementById(id);
-        if( _el ) { _el.src=src; }
-    },
-
+        if( _el ) { 
+            if (/WebKit/i.test(navigator.userAgent)) { // sniff
+                var preloader = new Image();
+                preloader.src=src; 
+                preloader.onload = function() {
+                    _el.src=preloader.src; 
+                    preloader.onload = null;
+                    preloader = null;
+                };
+            }
+            else {
+                _el.src=src;
+            }
+        }
+     },
     password: function(user_el,password_el,name) {
         var _u = document.getElementById(user_el);
         var _p = document.getElementById(password_el);
img_zoom3.txt (1,519 bytes)   
Theme
BrowserAll
PHP Version6
Database Version6.0

Relationships

has duplicate 0001394 closed image zoom not correct in product detail 

Activities

indreb

2010-02-22 09:58

reporter   ~0002362

When will be fixed this bug?

wanis

2010-02-22 13:14

reporter   ~0002365

This bug exist in browsers which uses WebKit engine (Safari, Chrome).
steps to reproduce:
1) open product page that has zoom images
   http://demoshop.oxid-esales.com/community-edition/Geschenke/Original-BUSH-Beach-Radio.html
   http://demoshop.oxid-esales.com/community-edition/Geschenke/Popcornmaschine-PINK.html
2) click on zoom link

NOTE: if page was displayed before, webkit somehow caches the images and everything works OK, so you can open next details page and click on zoom image.

Problem is that webkit has bug/misbehavior with onload status of the image (it executes the function before the image is rendered on page), so it doesn't know the image size.

wanis

2010-02-22 14:14

reporter   ~0002366

discussion about familiar bug is in here http://stackoverflow.com/questions/318630/get-real-image-width-and-height-with-javascript-in-safari-chrome

inpired by coments i fixed this bug
in out/basic/src/oxid.js:327

    image: function(id,src){
        var _el = document.getElementById(id);
        if( _el ) {
            _el.src="";
            _el.src=src;
        }
    },

fix: added empty src for image, so onload will be forced to load. (see discussion in link)
(will add the patch here)

wanis

2010-03-28 01:44

reporter   ~0002444

ok i think i found another solution, which works without any misbehavior.
in out/basic/src/oxid.js:327
[code]
    // switch image src
    image: function(id,src){
        var _el = document.getElementById(id);
        if( _el ) {
            var preloader = new Image();
            preloader.src=src;
            preloader.onload = function() {
                _el.src=preloader.src;
                preloader.onload = null;
                preloader = null;
            };
        }
     },
[/code]
and adtitional code in oxid.popup.resize after determining max width and height
in out/basic/src/oxid.js:168
[code]
                if ((newWidth > maxWidth || newHeight > maxHeight)) {
                    _el.style.overflow ='auto';
                }
                else {
                    _el.style.overflow ='hidden';
                }
[/code]
full resize function looks now like this:
[code]
        resize : function(id, newWidth, newHeight ){

            if(newWidth === 0 && newHeight === 0){
                return;
            }

            var _el = document.getElementById(id);
            var maxWidth = newWidth;
            var maxHeight = maxHeight;

            if(_el) {
                if( typeof( window.innerWidth ) == 'number' ) {
                    maxWidth = window.innerWidth;
                    maxHeight = window.innerHeight;
                } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
                    maxWidth = document.documentElement.clientWidth;
                    maxHeight = document.documentElement.clientHeight;
                }

                if ((newWidth > maxWidth || newHeight > maxHeight)) {
                    _el.style.overflow ='auto';
                }
                else {
                    _el.style.overflow ='hidden';
                }
                if(newWidth > maxWidth){ newWidth = maxWidth;}
                if(newHeight > maxHeight){ newHeight = maxHeight;}

                _el.style.width = newWidth+'px';
                _el.style.height = newHeight+'px';

                _el.style.marginLeft = '-'+Math.round(newWidth/2)+'px';
                _el.style.marginTop = '-'+Math.round(newHeight/2)+'px';
            }
        }

    },
[/code]
this will prevent from appearing scrollbars then image fits in window

wanis

2010-04-08 11:37

reporter   ~0002474

added IF as Internet explorer doesn't understand double onload.
[code]
    // switch image src
    image: function(id,src){
        var _el = document.getElementById(id);
        if( _el ) {
            if (/WebKit/i.test(navigator.userAgent)) { // sniff
                var preloader = new Image();
                preloader.src=src;
                preloader.onload = function() {
                    _el.src=preloader.src;
                    preloader.onload = null;
                    preloader = null;
                };
            }
            else {
                _el.src=src;
            }
        }
     },

[/code]
patch made against Oxid 4.3.0

alfonsas_cirtautas

2010-06-17 03:59

reporter   ~0003185

image preload added to oxid.popup.addResizer() function as second retry (no browser sniffing needed) + overflow handling added to oxid.popup.resize()