793216 - images.google.com image single view carrousel is stacked on tablet

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect, P5)

Description

[Tyler Downer [He/Him]]

Not sure if this is already covered, but this is something we've been seeing on Input:

"when using Google and searching for pics under their pics search option. It only brings up a small amount and you can't scroll down and keep getting mor and you can not ope any of them"

Comment 1

[Aaron Train [:aaronmt]]

Not sure what the issue is describing here. When I search on Google Images, I get a handful, I scroll-down and I see their generic numbered pagination (« Prev 2 3 4 5 6 Next »). All links work for me.

WFM.

Comment 2

[Tyler Downer [He/Him]]

I tested vs. the stock browser, and I agree with aaron, we do get the standard numbers. possibly what is confusing people is the stock browser (haven't tested Chrome) gets a nicely ordered tile view of the images, with rows, columns, etc. Firefox just gets a jumble of images. That's the only major difference I saw, but could be the problem.

Comment 3

[Paul Feher]

First:
I think this  issue is for google.com tablet version because i can reproduce this on Samsung Galaxy Tab 3.1 using the latest Nightly (2012-09-23).

Steps to reproduce:
1. Load google.com (tablet version) 
2. Start a search for a picture.

Expected result:
A large list of picture is displayed but it doesn't have any pagination. If you access any of them a slideshow is displayed where you can navigate trough the whole list of pictures. (the behavior described here is observed for Dolphin and Stock Browser) 

Actual result:
A very short list of picture is displayed, shorter than the list displayed in Dolphin and Stock Browser. When you try to access any picture nothing happens, the page is zoomed-in on double tap action.

Note:
This doesn't function at all when using Opera browser the pictures are never loaded.

Second: 
The behavior for the phone version on Dolphin and Stock Browser the picture are separated individually by rows and columns, all pictures have the same dimension, it looks more ordered. Firefox displays 10 pictures (for my Samsung Galaxy R 2.3.4) of different size and order on every page, looks chaotic but all links work fine for me.

Comment 4

[Aaron Train [:aaronmt]]

Ok, I see this on the Nexus 7. I was reminded of this just now due to reading a new negative star review on Google Play

Mozilla/5.0 (Android; Tablet; rv:17.0) Gecko/17.0 Firefox/17.0

- Unable to tap an image to invoke its hyperlink (preview)
- Unable to scroll down to retrieve a new batch of images as you can in the desktop browser
- Unable to tap the 'More' button
- Unable to tap the wrench (tools) icon

Here's an error I see in console:

* TypeError: 'undefined' is not an object (evaluating 'a.h5h') *

Workaround - 'Request Desktop Site' seems to work fine with the desktop site.

With the mobile 'token', we get a different Google Images site and functionality seems to be fine.

Comment 5

[Aaron Train [:aaronmt]]

* Also, see the error: 

[JavaScript Error: "TypeError: a is undefined" {file: "http://images.google.com/xjs/_/js/s/s,jsa,c,sb_tab,hv,wta,cr,bct,cdos,ssb,nos,owt,tbpr,tbui,rsn,qi,ob,mb,lc,wobt,du,ada,amcl,aut,str,bb,tic,ivf,kp,tlie,lu,rtis,sfa,tab,tnt,vst,tng,cfm,cirosm,hsm,ig,pcc,csi/rt=j/ver=P7Lew-MRiXo.en_US./d=1/sv=1/rs=AItRSTNwfvJBHcoKbi4wjkZ-Mr1w-Pv9LA" line: 1380}]

Comment 6

[Tyler Downer [He/Him]]

Attachment: Screenshot of this issue

So, I loaded up google.com in release on a Nexus 7 in Landscape Mode, searched for "airplane", then clicked "Images".

Comment 9

[Brad Lassey [:blassey] (use needinfo?)]

Kats, can you please figure out the issues here

Comment 10

[Kartikaya Gupta (email:[e-mail])]

When I load google images on a tablet (in nightly), it loads fine. Scrolling down on the list of results causes more images to get loaded in, as expected. However when I click on one of the image results it pops up the slideshow view of the results which doesn't behave as expected. Instead of showing a carousel-style of images like in the stock browser, all of the images are stacked onto a single spot. Swiping changes the image shown, but without any animation transition, and sometimes it shows the wrong images relative to the search result page preview bar at the bottom.

I see exactly the same behaviour in desktop FF with the tablet UA string. There are no errors in the console and based on firebug inspection of the DOM what we are rendering seems to be sane given the contents of the DOM. I do see -moz- prefixed CSS properties in their code so they do appear to have customized stuff for us, but it's all obfuscated so I can't tell what exactly they're doing and where it's going wrong.

Comment 11

[donrhummy]

(In reply to Kartikaya Gupta (email:[e-mail]) from comment #10)
> When I load google images on a tablet (in nightly), it loads fine. Scrolling
> down on the list of results causes more images to get loaded in, as
> expected. However when I click on one of the image results it pops up the
> slideshow view of the results which doesn't behave as expected. Instead of
> showing a carousel-style of images like in the stock browser, all of the
> images are stacked onto a single spot. Swiping changes the image shown, but
> without any animation transition, and sometimes it shows the wrong images
> relative to the search result page preview bar at the bottom.
> 

I have this same issue as well as sometimes clicking an image doesn't even pop up that slideshow (which never works properly either). Using Nexus 7.

Comment 13

[Mike Graboski]

A new image preview UI has recently been rolled out for image search results on Firefox for Android.  Can you please test it out, and let me know if you're still encountering this issue?

Comment 14

[Aaron Train [:aaronmt]]

I'm able to scroll through image results now; there seems to be another issue in that I am not getting the image preview for the specified image one selects. For example; I search for 'mozilla', I tap the first result, I get a preview for the result in the row underneath the first result. I am trying this on our release on Google Play and Firefox Beta on Google Play.

Comment 15

[Aaron Train [:aaronmt]]

Note, the the above was tested on a Nexus 7, Android 4.2.2); on phones, everything seems to be working fine, I can confirm this by trying out the same steps on my Nexus 4 (Android 4.2.2), and am not seeing the same issues as I am on a tablet.

Comment 16

[donrhummy]

Testing on a Nexus 7, 4.2.2 Firefox Nightly:

1. Image search does properly load more images when scrolling down

2. When clicking on a specific image, there is still an error: it shows all the images stacked on top of each other

Comment 17

[Kartikaya Gupta (email:[e-mail])]

Mike, ping. See comments 14 and 16. Does that answer your questions? Is there something else we can do to keep this moving forward?

Comment 18

[Lawrence Mandel [:lmandel] (use needinfo)]

cc Katherine Loh, who has taken over for Mike at Google.

Comment 19

[kloh]

I've passed the feedback onto the UI team. I'll keep this thread updated as I find out more.

Comment 20

[u421692]

I've found another scenario that reproduces a similar issue:

1. Open "Google.com"(make sure that Request Desktop Site is NOT selected)
2. Search some content that will return photos(e.g. audi a4).
3. Scroll to image box and tap on an image.

Expected result:
Image is opened in detailed view.

Actual result:
Nothing happens, image is not opened.

Note: As a workaround, you can select "Request Desktop Site".
Environment: Asus Transformer TF101
Android version 4.0.3
Build: Mozilla aurora android 22.0a2

Comment 21

[Kartikaya Gupta (email:[e-mail])]

I'm unassigning this from myself because I'm not actually doing anything here; based on comment 19 we're waiting on Google.

Comment 22

[Alexandre Folle de Menezes]

I can reproduce this on a Galaxy Tab 2 running Android 4.1.1.  It works fine on my desktop and Galaxy S2. All running Firefox 20.

This seems to be related to bug 769530.

Comment 23

[Randell Jesup [:jesup] (needinfo me)]

The problems in comment 10 and comment 16 (when you click on an image, it shows the images as a "pile" and you can only really see the last one (two after the one you clicked on).  It's been this way for quite a while with no change.

Tested on Nexus 10 on Nightly

Needinfo to kloh to follow-up at Google

Comment 24

[Lawrence Mandel [:lmandel] (use needinfo)]

cc Karl, who is managing our compatibility effort with Google.

Comment 25

[Chris More [:cmore]]

Any update here?

Comment 26

[Karl Dubost💡 :karlcow]

I'm contacting the usual person. :)

Comment 27

[Randell Jesup [:jesup] (needinfo me)]

Still happening yesterday

Comment 28

[Roland Tanglao needinfo please :rolandtanglao, :mohnkuchen, :adobo, :sinigang, :roland]

Attachment: landcape-nexus10-kitkat44-ff2501-Screenshot_2013-12-02-11-33-51.png

google image search works fine for me on both Kobo ARC HD 7" Android 4.2, FF 25.0.1 and Nexus 10, Kitkat44, FF 25.0.1. Am I missing something?

Proof:
1. attached screenshot of Google Image Search Landscape, Nexus 10, KikKat44, FF25.0.1
2. Nexus 10 portrait:
http://www.flickr.com/photos/roland/11195821623/in/set-72157638328524236
2. Kobo Arc HD 7", Android 4.2, FF 25.0.1 portrait and landscape screenshots
http://www.flickr.com/photos/roland/sets/72157638328248923/

Comment 29

[Karl Dubost💡 :karlcow]

And working for me on Firefox Android too. I will close as fixed, except if someone reopens it.

Comment 30

[Kevin Brosnan [Ex-Mozilla]]

This is barely fixed. 

When on single image view you can't click through to the site (comment 0?). The images still stack when in single image view (comment 10). The surface of the site looks fine but if you actually try to use it the experience in Chrome is significantly better.

Comment 31

[Roland Tanglao needinfo please :rolandtanglao, :mohnkuchen, :adobo, :sinigang, :roland]

my apologies for focusing on the "front page view". i suggest a separate "single image view" bug and any other google image bugs should also have separate bugs (if they haven't been already filed)

Comment 32

[Karl Dubost💡 :karlcow]

So I do not have a tablet. but on Firefox Android on a Samsung it is working as expected. Series of images, then list of number at the bottom. When you touch on one image, it's popping up. and there are arrows on both sides for going through images in the carrousel, without issues.

(PS: Firefox not receiving the tier1 experience like Chrome, it is very often the case, not only for Firefox. You can try with Opera if you have any differences for example.)

Comment 33

[Roland Tanglao needinfo please :rolandtanglao, :mohnkuchen, :adobo, :sinigang, :roland]

(In reply to Karl Dubost :karlcow from comment #32)
> So I do not have a tablet. but on Firefox Android on a Samsung it is working
> as expected. Series of images, then list of number at the bottom. When you
> touch on one image, it's popping up. and there are arrows on both sides for
> going through images in the carrousel, without issues.
> 
> (PS: Firefox not receiving the tier1 experience like Chrome, it is very
> often the case, not only for Firefox. You can try with Opera if you have any
> differences for example.)

yup google image search "single image view" works fine on phones, it is broken as described in comment 10 on tablets

Comment 34

[Karl Dubost💡 :karlcow]

1. Did someone analyze the code sent to the devices? 
2. Is it different in Firefox Android and Firefox Tablet ?
3. Is it different in Firefox Tablet and Firefox OS Mobile?

Comment 35

[Karl Dubost💡 :karlcow]

I reopened and changed the title.
I removed the sitewait, because this bug needs to be properly analyzed.

Comment 36

[Hallvord R. M. Steen [:hallvors]]

Tablet and mobile get entirely different UIs (for starters, the "Tablet" UA gets Content-length: 68043 for the main page while the "Mobile" UA gets 10304..)

Comment 37

[Karl Dubost💡 :karlcow]

http -b GET images.google.com "User-Agent:Mozilla/5.0 (Android; Mobile; rv:25.0) Gecko/25.0 Firefox/25.0" > android-mobile.txt 
http -b GET images.google.com "User-Agent:Mozilla/5.0 (Mobile; rv:25.0) Gecko/25.0 Firefox/25.0" > mobile.txt 
http -b GET images.google.com "User-Agent:Mozilla/5.0 (Android; Tablet; rv:25.0) Gecko/25.0 Firefox/25.0" > android-tablet.txt 
http -b GET images.google.com "User-Agent:Mozilla/5.0 (Tablet; rv:25.0) Gecko/25.0 Firefox/25.0" > tablet.txt 
http -b GET images.google.com "User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:25.0) Gecko/20100101 Firefox/25.0" > fx25-mac.txt


 66.0K  android-tablet.txt html5 doctype
  9.5K  android-mobile.txt html5 doctype
  9.5K  mobile.txt         html5 doctype
  2.1K  tablet.txt         wapforum doctype
121.0K  fx25-mac.txt       html5 doctype


Indeed, very different content depending on the user agent.
There's no difference in the content in between "android mobile" and "mobile". A diff shows only a sessionid in a URI. 

Tablet is indeed another story. To note that tablet is receiving something different than desktop. So there is a specific detection (as opposed to no detection at all).

Comment 38

[Karl Dubost💡 :karlcow]

In Android Tablet, there is additional user agent detection.
It doesn't seem to be an issue with the CSS, or at least the -webkit- properties have their equivalent in -moz- or unprefixed.

I would vote at first sight for something into the JavaScript

Comment 39

[Hallvord R. M. Steen [:hallvors]]

The problem seems to be that they use CSS like 
-webkit-transform: translate3d(-346px, 0px, 0px)
to place images horizontally. I haven't quite gotten through all the code yet, but it seems they try to apply moz styling in some places, but fail due to various bugs in their JS. The main issue seems to be that _.zo is set to '-moz-transform' and they try setting element.style[_.zo] = ... if _.zo were 'MozTransform' it would work.

Comment 40

[Mike Taylor [:miketaylr]]

Oddly enough, Chrome seems to support that kind of element.style["-webkit-foo"] setting: https://cloudup.com/ihIPQsCycyB O_o

Comment 41

[Karl Dubost💡 :karlcow]

And epic blog post from Hallvord. Thanks Hallvord.
http://www.whatcouldbewrong.com/articles/7/google-image-search-s-image-pile

Comment 42

[Chris More [:cmore]]

(In reply to Karl Dubost :karlcow from comment #41)
> And epic blog post from Hallvord. Thanks Hallvord.
> http://www.whatcouldbewrong.com/articles/7/google-image-search-s-image-pile

Wow. totally epic. Thanks so much Hallvord.

So, if the issue is on Google's side, is that Kloh or someone else at Google? Do we have other Google friends we can talk to?

Comment 43

[Karl Dubost💡 :karlcow]

It is already reported and I sent a reminder yesterday :)

Comment 44

[Ralph Giles (:rillian)]

A family member hit this today. They had learned to use chrome for image search.

Comment 45

[Chris More [:cmore]]

(In reply to Ralph Giles (:rillian) from comment #44)
> A family member hit this today. They had learned to use chrome for image
> search.

:( This has existed for too long and perceived issues with Firefox like this over time could surely have an impact on long-term product usage. Hope we get a response from Google.

Comment 46

[donrhummy]

(In reply to Karl Dubost :karlcow from comment #43)
> It is already reported and I sent a reminder yesterday :)

Can you post a link to the bug report?

Comment 47

[Karl Dubost💡 :karlcow]

(In reply to donrhummy from comment #46)
> Can you post a link to the bug report?

The bug report is here.
We have contacts with Google. They handle bugs on their side (at their own pace) in their private bug reporting systems. So there is no other links than this one. As for the resolution, it is highly dependent on the will and priorities from Google.

Comment 48

[Hallvord R. M. Steen [:hallvors]]

I re-tested recently and got the impression that they had "fixed" this by switching to a different UI - can someone with a real tablet to run Firefox on verify?

Comment 49

[Randell Jesup [:jesup] (needinfo me)]

(In reply to Hallvord R. M. Steen from comment #48)
> I re-tested recently and got the impression that they had "fixed" this by
> switching to a different UI - can someone with a real tablet to run Firefox
> on verify?

Nope, exact same problem as always.  No change.

Comment 50

[donrhummy]

(In reply to Hallvord R. M. Steen from comment #48)
> I re-tested recently and got the impression that they had "fixed" this by
> switching to a different UI - can someone with a real tablet to run Firefox
> on verify?

Still not working on Nexus 7

Comment 51

[Hallvord R. M. Steen [:hallvors]]

You're right. I probably had some cookies or session data that messed up the testing. Anyway, I've now rewritten the extension/slimerjs test (which was also showing a false pass) to hopefully be more reliable.

Comment 52

[donrhummy]

(In reply to Hallvord R. M. Steen from comment #51)
> You're right. I probably had some cookies or session data that messed up the
> testing. Anyway, I've now rewritten the extension/slimerjs test (which was
> also showing a false pass) to hopefully be more reliable.

What needs to happen to get this fixed? Can we help?

Comment 53

[Hallvord R. M. Steen [:hallvors]]

Google needs to fix the code to set element.style['MozTransform'] = ... rather than setting element.style['-moz-transform'] = ...

If you know somebody at Google who works on this code you could help by sending them a hint ;-)

Comment 54

[donrhummy]

(In reply to Hallvord R. M. Steen from comment #53)
> Google needs to fix the code to set element.style['MozTransform'] = ...
> rather than setting element.style['-moz-transform'] = ...
> 
> If you know somebody at Google who works on this code you could help by
> sending them a hint ;-)

Is there a standard CSS style that could be used for firefox instead of the Moz specific one?

Comment 55

[Hallvord R. M. Steen [:hallvors]]

Certainly possible (and better) to set just "transform" by now.

Comment 56

[Robert O'Callahan (:roc) (email my personal email if necessary)]

We have the option of just adding support for -moz-transform.

Comment 57

[donrhummy]

(In reply to Robert O'Callahan (:roc) (Mozilla Corporation) from comment #56)
> We have the option of just adding support for -moz-transform.

I vote for this. It doesn't break anything already out there, nor does it remove FF's standards-compliance and if it makes Firefox used by more people on more platforms, I see that as a good thing.

Comment 58

[Hallvord R. M. Steen [:hallvors]]

I agree, and reported bug 970134 on handling hyphenated properties set on element.style

Comment 61

[donrhummy]

(In reply to Hallvord R. M. Steen from comment #58)
> I agree, and reported bug 970134 on handling hyphenated properties set on
> element.style

Is this being implemented? which version?

Comment 62

[Aaron Train [:aaronmt]]

(In reply to donrhummy from comment #61)
> (In reply to Hallvord R. M. Steen from comment #58)
> > I agree, and reported bug 970134 on handling hyphenated properties set on
> > element.style
> 
> Is this being implemented? which version?

Bug 958887 has no assignee.

Comment 63

[Brad Lassey [:blassey] (use needinfo?)]

filter on [mass-p5]

Comment 64

[Karl Dubost💡 :karlcow]

So I tested today on Firefox OS with a Chrome Mobile UA. Both on Firefox Android (Bug 921532) and Firefox OS (this bug), images.google.com is working perfectly.

Comment 65

[Karl Dubost💡 :karlcow]

Tested with Firefox Android Tablet UA on Gecko Desktop.
This seems to be working now.
Could someone on a real tablet test?

Comment 66

[Mike Taylor [:miketaylr]]

Yes, tested on my Nexus 7 with the latest Nightly. We get served the same page that Chrome Tablet does and it works as expected (results displayed in grid, tapping on one shows a lightbox, you can swipe between results, etc.).

Comment 67

[Hallvord R. M. Steen [:hallvors]]

I think this sort of regressed since I now get a very simple search UI when sending the "Firefox on Android tablet"-ish UA string. Karl, can you test too? I suggest we open a new bug for it though.

Comment 68

[donrhummy]

(In reply to Hallvord R. M. Steen [:hallvors] from comment #67)
> I think this sort of regressed since I now get a very simple search UI when
> sending the "Firefox on Android tablet"-ish UA string. Karl, can you test
> too? I suggest we open a new bug for it though.

That sounds like an add-on. Are you using an add-on to do this? If so, that's not this bug.

Comment 69

[Kevin Brosnan [Ex-Mozilla]]

Hallvors I get a usable site using a Nexus 10 on Beta 41 and Nightly 43 in the United States. Rather close to the GI desktop site. Tapping on an image and swiping to view next or previous images works well, no stacking of images.

Comment 70

[Karl Dubost💡 :karlcow]

Hallvord, I guess Mike has an Android Tablet.
But testing on Desktop with a Firefox Android Tablet UA.

   "Mozilla/5.0 (Android 4.4.4; Tablet; rv:37.0) Gecko/37.0 Firefox/37.0"

and a 1024x768 simulated viewport. 

   Everything seems normal.

Comment 71

[Hallvord R. M. Steen [:hallvors]]

Thanks both for checking. On a Firefox OS tablet they serve a very simple UI. If we still have a community around that project perhaps they can help. The test actually failed because GI improved their code: we were checking if they set -moz-transform and now they set transform without a prefix. Yay :)