Closed Bug 793216 Opened 7 years ago Closed 5 years ago

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

Categories

(Web Compatibility :: Mobile, defect, P5)

ARM
Android
defect

Tracking

(firefox21 affected, firefox22 affected, firefox23 affected, firefox24 affected, firefox25 affected, firefox26 affected, firefox27 affected, fennec+)

RESOLVED FIXED
Tracking Status
firefox21 --- affected
firefox22 --- affected
firefox23 --- affected
firefox24 --- affected
firefox25 --- affected
firefox26 --- affected
firefox27 --- affected
fennec + ---

People

(Reporter: tdowner, Assigned: karlcow)

References

(Blocks 1 open bug, )

Details

(Whiteboard: [SUMO][webcompat] [country-all] [serversniff][sitewait])

Attachments

(2 files)

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"
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.
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.
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.
Keywords: qawanted
Summary: Google Images only Loading a few Images → [TABLET] Google Images only Loading a few Images
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.
Summary: [TABLET] Google Images only Loading a few Images → [TABLET] Google Images Issues
Component: Evangelism → Mobile
Product: Firefox for Android → Tech Evangelism
Version: Firefox 16 → unspecified
So, I loaded up google.com in release on a Nexus 7 in Landscape Mode, searched for "airplane", then clicked "Images".
Whiteboard: [SUMO] → [SUMO][webcompat]
Duplicate of this bug: 821644
tracking-fennec: --- → ?
Duplicate of this bug: 821641
Kats, can you please figure out the issues here
Assignee: nobody → bugmail.mozilla
tracking-fennec: ? → +
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.
(In reply to Kartikaya Gupta (email:kats@mozilla.com) 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.
Duplicate of this bug: 838392
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?
Keywords: qawanted
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.
Keywords: qawanted
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.
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
Mike, ping. See comments 14 and 16. Does that answer your questions? Is there something else we can do to keep this moving forward?
Flags: needinfo?(mgraboski)
cc Katherine Loh, who has taken over for Mike at Google.
Flags: needinfo?(mgraboski) → needinfo?(kloh)
I've passed the feedback onto the UI team. I'll keep this thread updated as I find out more.
Flags: needinfo?(kloh)
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
I'm unassigning this from myself because I'm not actually doing anything here; based on comment 19 we're waiting on Google.
Assignee: bugmail.mozilla → nobody
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.
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
Flags: needinfo?(kloh)
cc Karl, who is managing our compatibility effort with Google.
Any update here?
I'm contacting the usual person. :)
Assignee: nobody → kdubost
Whiteboard: [SUMO][webcompat] → [SUMO][webcompat] [country-all] [serversniff] [sitewait]
Still happening yesterday
Status: NEW → ASSIGNED
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/
And working for me on Firefox Android too. I will close as fixed, except if someone reopens it.
Status: ASSIGNED → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
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.
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)
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.)
(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
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?
I reopened and changed the title.
I removed the sitewait, because this bug needs to be properly analyzed.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
Summary: [TABLET] Google Images Issues → images.google.com image single view carrousel is stacked on tablet
Whiteboard: [SUMO][webcompat] [country-all] [serversniff] [sitewait] → [SUMO][webcompat] [country-all] [serversniff]
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..)
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).
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
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.
Whiteboard: [SUMO][webcompat] [country-all] [serversniff] → [SUMO][webcompat] [country-all] [serversniff][contactready]
Oddly enough, Chrome seems to support that kind of element.style["-webkit-foo"] setting: https://cloudup.com/ihIPQsCycyB O_o
And epic blog post from Hallvord. Thanks Hallvord.
http://www.whatcouldbewrong.com/articles/7/google-image-search-s-image-pile
(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?
It is already reported and I sent a reminder yesterday :)
A family member hit this today. They had learned to use chrome for image search.
Whiteboard: [SUMO][webcompat] [country-all] [serversniff][contactready] → [SUMO][webcompat] [country-all] [serversniff][sitewait]
(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.
(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?
(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.
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?
(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.
(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
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.
(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?
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 ;-)
(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?
Certainly possible (and better) to set just "transform" by now.
We have the option of just adding support for -moz-transform.
(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.
I agree, and reported bug 970134 on handling hyphenated properties set on element.style
Duplicate of this bug: 881876
Depends on: 958887
No longer depends on: 970134
(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?
(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.
filter on [mass-p5]
Priority: -- → P5
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.
Status: REOPENED → ASSIGNED
Tested with Firefox Android Tablet UA on Gecko Desktop.
This seems to be working now.
Could someone on a real tablet test?
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.).
Status: ASSIGNED → RESOLVED
Closed: 6 years ago5 years ago
Resolution: --- → FIXED
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.
Flags: needinfo?(kdubost)
(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.
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.
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.
Flags: needinfo?(kdubost)
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 :)
No longer blocks: 921532
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.