Google Chrome, Safari, IE problem with zooming class
Valdemar72
I found a problem with zooming class in Google Chrome, Safari and IE
too.
I'm talking about the "zazzle-like" zoom on the thumbnail images, that
shows the bigger size picture after fading into.
This is the class: Uize.Widget.CollectionItem.Zooming, initiating the
module Uize.Widget.Page. I'm using the latest Uize Framework version.
The problem happens the first time you rollover the mouse, the picture
is not fading. From the second time on, so when the high res picture
is cached, it's fading good.
This doesn't happen in Firefox, as it fades using the low res picture,
and once is loaded it shows the high res one.
I found these differences among browsers (this happens only the first
time you zoom the image):
Firefox: all is showing very well since the first time, the zoom uses
the low res picture for fading, and shows the high res one when is
available
IE 7 and 8: the zoom is fading from the beginning, but when the high
res pic is loaded, you see the big picture inside the box that is
loading over the low res one, as happens when a high res pic is
loading in a normal web page (while in Firefox the high res is
replacing the low res without any visible "sign")
Google Chrome 3 and Safari: the zoom is not fading, while the high res
picture is showing when is loaded. So you have to stay with the mouse
over the thumbnail and when the high res picture is loaded is showed
into the box.
I also found the same problem in Zazzle website (with Chrome only, not
with IE), but the point is that they probably have a very fast server,
so the "bug" is not so much visible, if you are not searching for it
(as I did).
In UIZE demo page "Zooming Collection Items" this happens too (with
Chrome only, not with IE), same thing, but is quite fast so less
visible.
Since I think that is not due to my mistakes (as is showing in Uize
site too...), I believe someone will work on this (little) issue.
Many thanks again for your help and for this very good framework.
Max.
Ben Ilegbodu
Ben Ilegbodu
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
BenMVP.com
http://www.benmvp.com/
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Visit my Zazzle stores!
http://www.zazzle.com/benmvp*
http://www.zazzle.com/benesol*
http://www.zazzle.com/rep_yo_city*
http://www.zazzle.com/name_gear*
http://www.zazzle.com/sports_gear*
http://www.zazzle.com/christ_centered*
http://www.zazzle.com/humor_gear*
--
UIZE JavaScript Framework...
...OFFICIAL WEB SITE: http://www.uize.com
...COOL UIZE SWAG: http://www.zazzle.com/uize_merch?rf=238804607086393908
UIZE JavaScript Framework Google Group...
...WEB SITE: http://groups.google.com/group/uize?hl=en
...TO POST: email to ui...@googlegroups.com
...TO UNSUBSCRIBE: email to uize-uns...@googlegroups.com
Rich Bean
cvr
Thanks for the helpful and detailed report. We will take a look into
this problem and produce a fix. A fix may be available within the next
week or two. The fix will be announced as soon as it's ready.
Valdemar72
Max.
cvr
available with the latest update of UIZE. Please verify that this
latest update fixes the problem you were seeing. I was able to
reproduce the product in Chrome and Safari, and my testing after
making the changes indicates that the effect should now be smooth for
slow connections or larger high resolution image files.
Valdemar72
I just downloaded and installed the latest version of UIZE after I saw
your message, and tried in a site I'm developing.
The problem seems to remain almost the same, but not with all the
pictures, it seems smoother with pictures of less bytes size.
Here I add 2 links to avi files with screen recording (both IE an
Chrome, after cache is cleared):
(avi are low quality but the problem is visible)
IE8:
http://www.massimoperini.it/zoomtest/zoom-ie8.avi
CHROME:
http://www.massimoperini.it/zoomtest/zoom-chrome.avi
(pictures are demo).
Thanks again,
Max.
cvr
I see in the videos (thanks for providing those, BTW) is exactly the
symptoms that I saw before the implementation was changed, and exactly
the symptoms that went away upon testing the new code.
The new approach adds a node for the low resolution zoom in
immediately on mousing over. Then, when the zoom in is activated, a
node for the high resolution is added. Only when the high resolution
image has loaded in is the low resolution node hidden and the high
resolution node shown. Therefore, there should be no visible artifacts
of the high resolution image loading in - it should not be seen.
Please see if you can still repro the problem on the example pages on
the uize.com Web site. Clear your browser cache, just to be sure.
http://www.uize.com/examples/collection-item-zooming.html
http://www.uize.com/examples/collection-item-zooming-with-image-switching.html
Valdemar72
well, I downloaded again the framework, and uploaded again to my
server just to be sure.
I made many tests, from uize site all is working good.
I tried running the example collection-item-zooming inside my server,
and it also works with chrome and ie!
Instead, the same script with my images which are stored in my server,
has still the bug.
Actually is a bit different than before. In Chrome the bug is showing
only the first time I open the browser. For example, if I open the
browser, open the page after clearing cache, the bug happens. If I
clear cache without closing the browser the bug doesn't show.
In explorer the bug is the same as before.
Just to be more sure about what I'm saying, I tried to put the
pictures of uize hosted in rlv.zcache.com just linked into my page,
where I'm running my script. Well, if I put these pictures the bug
doesn't show.
I don't think I made mistakes in my script because in Firefox
everything is working good, and even on chrome and explorer the
smaller size pictures are working.
Actually, the only difference apart from a different server, is that
the images linked in the uize demo are supplied by a script
(designall.dll), while my pictures are linked directly in src
attribute (imagename.jpg).
Many thanks again, I'm here if you need more tests.
Max.
On 8 Feb, 09:53, cvr <google-2...@tomkidding.com> wrote:
> That really makes me wonder if the new code is truly being used. What
> I see in the videos (thanks for providing those, BTW) is exactly the
> symptoms that I saw before the implementation was changed, and exactly
> the symptoms that went away upon testing the new code.
>
> The new approach adds a node for the low resolution zoom in
> immediately on mousing over. Then, when the zoom in is activated, a
> node for the high resolution is added. Only when the high resolution
> image has loaded in is the low resolution node hidden and the high
> resolution node shown. Therefore, there should be no visible artifacts
> of the high resolution image loading in - it should not be seen.
>
> Please see if you can still repro the problem on the example pages on
> the uize.com Web site. Clear your browser cache, just to be sure.
>
cvr
I've been able to reproduce the problem you're seeing. I believe my
implementation approach is sound, but it looks like a bug may have
been introduced late in the game that is thwarting its effectiveness.
I am looking into a fix now.
> >http://www.uize.com/examples/collection-item-zooming.htmlhttp://www.u......
cvr
I located and fixed the bug that was causing the problem you were
seeing and that I was able to confirm in my own testing. Please try
the latest version and let us know how it works for you. Thanks for
your patience and the valuable info you provided to help us
troubleshoot.
On Feb 8, 3:49 am, Valdemar72 <mr.valde...@tin.it> wrote:
> >http://www.uize.com/examples/collection-item-zooming.htmlhttp://www.u......
Valdemar72
Thanks for working at this problem.
Well, I downloaded the latest version and uploaded in my server.
Actually I found the same problem.
So I thought uhm let's try changing the way the image is shown, as you
do in uize demo page.
I made a simple php script that shows the image, using gd libraries,
and just replace the normal html attribute "src=imagename.jpg" with
"src=show_image.php?img=imagename.jpg&type=0" and so on...
after that I just changed in uize js
...
previewZoomUrl:function () {return this.get ('previewUrl').replace
('type=0','type=1')},
...
where type 0 is the thumbnail and type 1 is the big pic, so the php
script knows it and shows the right image.
Well, with this method the zoom is working a lot better.
I can say that in Explorer is almost ok, while in Chrome there are
still some bugs, but not with every picture.
Here I made some screen recording (please note that the flickering and
the bad resolution is due to the video quality):
note: I replace the thumbnail with the big size picture with a script
like this:
...
previewZoomUrl:function () {return this.get ('previewUrl').replace
('images','images/big')},
...
***
IE 8, with a normal src attribute linking directly to the picture
(src="images/imagename.jpg")
http://www.massimoperini.it/uize_zoom_test/ie_src_attribute.avi
the bug still seems to be there
***
IE 8, using the php script (gd libraries)
http://www.massimoperini.it/uize_zoom_test/ie_php_gd.avi
the zoom work very well!
***
CHROME 4.0.249, with a normal src attribute
http://www.massimoperini.it/uize_zoom_test/chrome_src_attribute.avi
the bug seems to be the same, please note that the 2nd picture from
the left is working, because it probably loaded the big one the first
time I put the mouse over...
***
CHROME 4.0.249, using the php script
http://www.massimoperini.it/uize_zoom_test/chrome_php_gd.avi
the zoom seems to work better, but still with some bug sometimes
For now I will use the php script as is good workaround, anyway I
think there is some fix to do more, I'm here if you need more tests.
Thank you.
Max.