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

Status: RESOLVED DUPLICATE of bug 975444

(Web Compatibility :: Site Reports, defect)

Description

[Marco Castelluccio [:marco]]

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.

Comment 1

[bug.zilla]

Hi, any update to this?
Thanks.

Comment 2

[Karl Dubost💡 :karlcow]

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.

Comment 3

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

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

Comment 4

[Karl Dubost💡 :karlcow]

We need to fix the test.

Comment 5

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

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.

Comment 6

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

(enlarging and swiping works fine too)

Comment 7

[Karl Dubost💡 :karlcow]

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

Comment 8

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

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

Comment 9

[Karl Dubost💡 :karlcow]

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.

Comment 10

[Marco Castelluccio [:marco]]

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

Comment 11

[Marco Castelluccio [:marco]]

Attachment: Firefox

Comment 12

[Marco Castelluccio [:marco]]

Attachment: Chrome

Comment 13

[Karl Dubost💡 :karlcow]

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

Comment 14

[Karl Dubost💡 :karlcow]

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.

Comment 15

[Jan Henning [:JanH]]

Attachment: Filtering options cut off in FF

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.

Comment 16

[Marco Castelluccio [:marco]]

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

Could you file new bugs for them?

Comment 17

[Karl Dubost💡 :karlcow]

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>

Comment 18

[Karl Dubost💡 :karlcow]

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.

Comment 19

[Karl Dubost💡 :karlcow]

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.

Comment 20

[Karl Dubost💡 :karlcow]

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

Comment 21

[Jan Henning [:JanH]]

Attachment: Google search filtering options.png

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.

Comment 22

[Jan Henning [:JanH]]

Attachment: Google search filtering options artefact.png

Comment 23

[Karl Dubost💡 :karlcow]

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

Comment 24

[Mike Taylor [:miketaylr]]

Attachment: Screenshot_2016-04-11-15-49-16.png

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.

Comment 25

[Mike Taylor [:miketaylr]]

(That is, when Bug 1259345 ships)

Comment 26

[Karl Dubost💡 :karlcow]

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