Closed Bug 921532 Opened 7 years ago Closed 4 years ago

Google images on Firefox Android doesn't load images as you scroll

Categories

(Web Compatibility :: Mobile, defect)

ARM
Android
defect
Not set
minor

Tracking

(Not tracked)

RESOLVED DUPLICATE of bug 975444

People

(Reporter: marco, Assigned: karlcow)

References

(Blocks 1 open bug, )

Details

(Whiteboard: [country-all] [serversniff] [tier1] [sitewait])

Attachments

(6 files)

In the stock browser, Google images loads images as you scroll.
In Firefox, you need to press small links at the bottom of the page to get more results.
Blocks: google.com
Severity: normal → minor
OS: Linux → Android
Hardware: x86_64 → ARM
Summary: Google images on Firefox doesn't load images as you scroll → Google images on Firefox Android doesn't load images as you scroll
Whiteboard: [country-all] [serversniff] [tier1] [contacready]
Whiteboard: [country-all] [serversniff] [tier1] [contacready] → [country-all] [serversniff] [tier1] [contactready]
Hi, any update to this?
Thanks.
The bug has been reported to Google. But do not expect a quick resolution. Things which are more tier1/tier2 differences are usually not on the priority list of Google. Aka it's working but with a different UI.
Assignee: nobody → kdubost
Status: NEW → ASSIGNED
Whiteboard: [country-all] [serversniff] [tier1] [contactready] → [country-all] [serversniff] [tier1] [sitewait]
Given bug 793216, assuming we'd hit that with the fancier stuff, I suppose this is a better UI for the time being..
Summary: Google images on Firefox Android doesn't load images as you scroll → Google images on Firefox Android and Firefox OS doesn't load images as you scroll
We need to fix the test.
Flags: needinfo?(hsteen)
Nope, works fine on Android now - the "pass" result is correct \o/

I'll change this bug to be Firefox on Android - specific and clone another bug for FxOS.
Flags: needinfo?(hsteen)
(enlarging and swiping works fine too)
Status: ASSIGNED → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
Summary: Google images on Firefox Android and Firefox OS doesn't load images as you scroll → Google images on Firefox Android doesn't load images as you scroll
Hallvord, Are you sure about that?
I just tested and I got the links at the bottom.
Flags: needinfo?(hsteen)
Sigh. I see that too now. Was my Fx Android spoofing as something when I tested? Not sure..
Status: RESOLVED → REOPENED
Flags: needinfo?(hsteen)
Resolution: FIXED → ---
Status: REOPENED → NEW
Note, when faking a Chrome Mobile user agent on Firefox Desktop, we receive a perfectly working site, which is loading the images dynamically.

I will recontact Google.
Status: NEW → ASSIGNED
There's also a visible difference in the resolution of the images.
Attached image Firefox
Attached image Chrome
no changes of behavior with Firefox Android version number. Still broken.
See Also: → 1169931
When faking with the iPhone UA on iOS 8
" Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4"

We get a version which is working better except for the search button:

<button class="lsbb" aria-label="Google Search" id="tsbb" name="btnG" type="submit"> 
  <div class="sbico"> 
    <span class="_Wig _yjg">

<style>
._Wig {
    background-color: currentColor;
    display: block;
    height: 24px;
    -webkit-mask-size: 100% 100%;
    position: relative;
    width: 24px
}
</style>

<style>
._yjg {
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAQAAAD9CzEMAAABl0lEQVR4Ae3Tz0obURSA8W+jkiZZpOts8mfbhCyCiKD0ORR9Df8b9RXcKH0NUaQ6irbSfQn4AJpnSAI5zeJw6GJmbu9t76Iwv2977pzMHUKhEFmPMx4YMZk3IuGULv/MZ74hKT2zzl/7wBckp0tKhOMjPxBHL9TCf709nhlXbNBggUWabHL9+4rQt7DL4Sd9jFpmiGgXYZ9WtK+USVPh3mbW8Pbdfn2ZLBV7iyc89ezu++RZQbQOXs702BUuNzp5gpcHPbaBy5ZO3uFlpMcauLR08g0vEz22gMuSTo7DFiz+8YJp2BU1cWnr5DteEj22icu2TiZ4OdVj17jc6uQAL11EWybPqs19wtOzHhxSIUuVV516xNs6ot1nrKja33HGKgEuEW3ISsrlvCLaOUFKvCDWDVu0WJrXZptbxJpQJ1BNV+Rkf8nj0Le4QDKbcU4d0Y4ItMYTktKjflqxDgnW4YQ73hgz5Z2EAR0UA8Q6IIrj+CuOEGufKA4Ra48oDhBrN/6KHaLYj79iL/YC2I34eLUzr1D4H/0CiQtTX7iK62YAAAAASUVORK5CYII=)
}
</style>
    </span> 
  </div> 
</button>

This is using -webkit-mask-*

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-image


On the other hand… 
A version which is working perfectly on Gecko is the one sent to this UA an iPod on iOS 6_1_6 which has a simpler code.
" Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_6 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10B500 Safari/8536.25"


We receive this html

<button class="lsbb" aria-label="Google 検索" id="tsbb" name="btnG" type="submit">
    <div class="sbico"> </div>
</button>

with the following CSS:

.sbico {
	background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAABqUlEQVR42r3WzyvDcRzH8Y+vOHDkpBwpB46k3MwOfu0wLvgDyEEp/8DOrjat5MSJs7i4O7CaWClqshxELphf81QO65Vv7+++37ZXPVprfT7Py7e+c5VKxY+HMWSQwzMYn3xHBjF4cLXy+2ESFwiyC0xGDbdiE2G2idagYY0eIMoOJB4onMV/u0IKcQxgBIs4wjd02VrCE9C9YxXNcD6GcQPdRJCwh3M5WEYcLoBO6IN4Ds8Kx6BbM2KqB69yR8wKp+XANVrgarQu92xY4RM5kIILoVfuObXCJTkwChfSQ9U9j1b4U8L9EcL56ous8BOqNxQhXARj3GuFcxJeDhntwFfVPWdWOCPh45DhJbknbYXjYJEesHYU5Y64FfZwKYdu0RUw2oQdOX8Jzwr/moaugD4j2oZd6KZqeTttQVdGBoNogvvTjRWUoNsL8z4+hN/eUMQzrJWRtMIa30aY7UNfq0krrBIoIMgKSMDhM2jc+pc5jizyeAHjk+/IYlye3gWf+IwRjsKOa7ge5qHxD8xIuLFxCTc0nqhHTM1B46W6RjWu4UaZxR3uMfUDvUqknv4oBC4AAAAASUVORK5CYII=') no-repeat center center;
	background-size:15px;
	height:15px;
	margin:auto;
	width:15px
}


Basically it would improve the user experience to ask Google to send us that version.

There are a couple of flexbox issues. Maybe to test a bit more.
Two related problems:
- When searching by image (I've got an add-on installed which adds a context menu entry which calls encrypted.google.com/searchbyimage?image_url=<image URL>), Google correctly gets the fingerprint of that image, but then instead of opening encrypted.google.com/search?tbs=sbi:<very long image fingerprint>, it redirects Firefox users to encrypted.google.com/webhp?tbs=sbi:<very long image fingerprint>, which simply displays Google's homepage and no search results at all.
- Clicking on More -> Search Tools gives you some options to filter the search results. For Image search, this works without problems, because all filtering options fit on the screen even in portrait mode. For a web search (at least when searching on an international edition, e.g. google.de), there are some additional filtering options which take up so much space that they don't fit on the screen in portrait mode (see the attached screenshot). On Chrome or the Android stock browser, that box can be scrolled left and right to access all filtering options, however on Firefox that doesn't work.
(In reply to Jan Henning (:JanH) from comment #15)
> Two related problems:

Could you file new bugs for them?
See Also: → 1047854
See Also: → 1200652
with the progress on Webkit aliasing, we get a good rendering with a Chrome Mobile UA, except for the -webkit-mask- stuff.

<style>
._Wig{
   display:inline-block;
   height:24px;
   position:relative;
   width:24px;
   z-index:0
   }
._Wig span{
   background-color:currentColor;
   display:block;
   height:100%;
   -webkit-mask-size:100% 100%;
   width:100%
   }
</style>
<style>
._yjg span{
   -webkit-mask-image:url(data:image/png;base64,iVBORw…K5CYII=)
   }
</style>
There might be a way.
https://developer.mozilla.org/en-US/docs/Applying_SVG_effects_to_HTML_content

Their current data URI including the -webkit-mask-image is 667 characters.
So if we can create an SVG file which is 
1. a magnifier being exactly similar to what they have now
2. is lighter than 667 characters

we might be able to convince them to use SVG for masking.
This is the markup sent with 
Mozilla/5.0 (Linux; Android 5.1.1; Nexus 6 Build/LYZ28E) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.76 Mobile Safari/537.36

<button class="lsbb" aria-label="Google Search" id="tsbb" name="btnG" type="submit"><div class="sbico"><span class="_wtf _Qtf"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg></span></div></button>

They removed the webkit-mask ??? \o/

So basically the version which is currently send to the Chrome UA on Android works very well on Gecko. Dynamic loading and everything. We could just ask Google to send us this. Oh. My.
So I tested again today. 
The good news is that the version that Google is sending to Chrome seems to be compatible with Firefox on Android. We could basically ask them to send us the same version.

That said I need to test a bit more the corner cases.
Some screenshots in http://www.otsukare.info/2016/02/01/testing-google-on-firefox-mobile
One thing that's not quite yet working is the menu bar for the advanced search options.
First one note: I'm translating some of the terms back from German, so they might not exactly correspond to what Google is actually using on the English language version.
Second note: I've tested with the Phony add-on set to "Android (Phone)", which seems to send
Mozilla/5.0 (Linux; Android 4.4.2; Nexus 5 Build/KOTH49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.166 Mobile Safari/537.36

The current mobile Google search layout uses two menu bars:
The first is the default one which allows switching between search results for All, Shopping, News, Videos, etc. This menu bar is working fine in Firefox.
It also contains an entry for further search options, which activates a second menu bar containing options for filtering by country, language, date etc.

This second menu bar is not quite working yet. Depending on the filtering options available and the language used, those options might not all fit onto the screen, especially in portrait mode. They used to be simply cut off (see Bug 1047854 Comment 13), whereas currently, they seem to extend the width of the page layout (see attachement). This is affecting both release (44.0) and nightly (47).
There are also some problems with scrolling that second menu bar - on 44.0 this doesn't work at all. On 47 scrolling works (Maybe thanks to bug 1213126? Haven't explicitly tested, though...), but there are some weird graphical artefacts when scrolling the first time after opening the search options menu bar - subsequent scroll attempts are unaffected until that menu bar is closed and opened again.
Jan,
Thanks this is super helpful. This is happening only on the German version or I guess any languages which have long menus. 

STR for others:
1. Go to German google ()
2. Slide the first menu (all, images, etc, until you reach the last one, aka "search tools" in English, suchoptionen in German)
3. tap the option
4. Options are and do not fit in the viewport
"Beliebiges Land
Beliebige Sprache
Beliebige Zeit
Alle Ergebnisse"

This bar doesn't behave with the same scrolling behavior than the previous one. In Chrome the bar is scrolling. Maybe the event on WebKitTransitionEnd
I just tested this and the broken layout from the search options menu is fixed (when spoofing as Chrome).

Sliding of menu options is somehow tied to layout.css.prefixes.webkit -- it works when this is true, and doesn't when it's false.

So when Bug 1213126 ships, we can either do a UA override or ask Google to send us the existing page.
(That is, when Bug 1259345 ships)
Depends on: 1259345
Depends on: 1324365
No longer depends on: 793216
No longer blocks: 1067364
We will ask Google to send us the version for Chrome Android.
Status: ASSIGNED → RESOLVED
Closed: 6 years ago4 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 975444
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.