Marco Castelluccio [:marco] Reporter
	Description • 11 years ago

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.

	bug.zilla
	Comment 1 • 11 years ago

Hi, any update to this?
Thanks.

	Karl Dubost💡 :karlcow Assignee
	Comment 2 • 11 years ago

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.

	Hallvord R. M. Steen [:hallvors]
	Comment 3 • 10 years ago

Given bug 793216, assuming we'd hit that with the fancier stuff, I suppose this is a better UI for the time being..

	Karl Dubost💡 :karlcow Assignee
	Comment 4 • 10 years ago

We need to fix the test.

	Hallvord R. M. Steen [:hallvors]
	Comment 5 • 10 years ago

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.

	Hallvord R. M. Steen [:hallvors]
	Comment 6 • 10 years ago

(enlarging and swiping works fine too)

	Karl Dubost💡 :karlcow Assignee
	Comment 7 • 10 years ago

Hallvord, Are you sure about that?
I just tested and I got the links at the bottom.

	Hallvord R. M. Steen [:hallvors]
	Comment 8 • 10 years ago

Sigh. I see that too now. Was my Fx Android spoofing as something when I tested? Not sure..

	Karl Dubost💡 :karlcow Assignee
	Comment 9 • 10 years ago

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.

	Marco Castelluccio [:marco] Reporter
	Comment 10 • 9 years ago

There's also a visible difference in the resolution of the images.

	Karl Dubost💡 :karlcow Assignee
	Comment 13 • 9 years ago

no changes of behavior with Firefox Android version number. Still broken.

	Karl Dubost💡 :karlcow Assignee
	Comment 14 • 9 years ago

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.

	Jan Henning [:JanH]
	Comment 15 • 9 years ago

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.

	Marco Castelluccio [:marco] Reporter
	Comment 16 • 9 years ago

(In reply to Jan Henning (:JanH) from comment #15)
> Two related problems:

Could you file new bugs for them?

	Karl Dubost💡 :karlcow Assignee
	Comment 17 • 9 years ago

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>

	Karl Dubost💡 :karlcow Assignee
	Comment 18 • 9 years ago

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.

	Karl Dubost💡 :karlcow Assignee
	Comment 19 • 8 years ago

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.

	Karl Dubost💡 :karlcow Assignee
	Comment 20 • 8 years ago

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

	Jan Henning [:JanH]
	Comment 21 • 8 years ago

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.

	Karl Dubost💡 :karlcow Assignee
	Comment 23 • 8 years ago

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

	Mike Taylor [:miketaylr]
	Comment 24 • 8 years ago

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.

	Mike Taylor [:miketaylr]
	Comment 25 • 8 years ago

(That is, when Bug 1259345 ships)

	Karl Dubost💡 :karlcow Assignee
	Comment 26 • 7 years ago

We will ask Google to send us the version for Chrome Android.