Closed Bug 1014193 Opened 10 years ago Closed 8 years ago

[B2G][Mobile] The user can not scroll up and down on images in Yahoo sports

Categories

(Web Compatibility :: Site Reports, defect)

Product:
Web Compatibility
Component:
Site Reports
Platform:
ARM
Gonk (Firefox OS)
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(b2g-v1.3 affected, b2g-v1.4 affected, b2g-v2.0 affected, b2g-v2.1 affected)

Status:
RESOLVED FIXED
Tracking Flags:
Tracking Status
b2g-v1.3 --- affected
b2g-v1.4 --- affected
b2g-v2.0 --- affected
b2g-v2.1 --- affected

People

(Reporter: psiphantong, Unassigned)

References

(
URL
)

Details

(Whiteboard: [flame-1.4-exploratory] [js] [country-all] [sitewait] )

Attachments

(1 file)

2014-05-21-15-12-46.png
320.65 KB, image/png
Details
Attached image 2014-05-21-15-12-46.png — 
Description:
When the user goes to images in Yahoo sports, the user will not be able to scroll up and down after searching the athlete on either landscape or portrait 


Repro Steps:
1. Go to http://m.yahoo.com 
2. Tap the drawer> tap more > tap sports
3. Search an athlete, ex: Michael Jordan
4. Tap Images


Actual:
User can not scroll in Images


Expected:
User should be able to scroll in Images


The issue occurs on the following devices:

1.4F Environmental Variables:
Device: Flame 1.4F
BuildID: 20140521000202
Gaia: 93623f6435849cc9f54d9996e8e64828ac9091d1
Gecko: 12fe2b67a099
Version: 30.0
Firmware Version: v10F-3

1.4 Environmental Variables:
Device: Buri 1.4 MOZ
BuildID: 20140520000201
Gaia: 17b102ee8d9a724b62285547cc5f1c5d30bfb01c
Gecko: 95be84248033
Version: 30.0
Firmware Version: v1.2-device.cfg

1.3 Environmental Variables:
Device: Buri 1.3 MOZ
BuildID: 20140514024003
Gaia: 96e3fa769a436a2182e6d54088fb41386eb2b5b5
Gecko: 685cf1d0dedb
Version: 28.0
Firmware Version: v1.2-device.cfg
 

Repro frequency: 100%
See attached: screenshot
This will be difficult to test for someone else outside of USA. Yahoo! does GeoIP redirection and so offers different types of user experiences. 

As an example, on a Flame from Japan (Language set to English).
1. Entering http://m.yahoo.com/
2. Get redirected to https://sg.m.yahoo.com/w/legobpengine/frontpage/?.intl=sg&.lang=en-sg
   (note: This is the Yahoo! Singapore Home page.
          Yahoo! could improve the layout/zoom of the initial page.)
3. The Yahoo! Singapore has a "hamburger icon" on the top left, tapping it.
4. Select "More >>"
5. Choose "Sports"
6. Get redirected to https://m.yahoo.com/w/legobpengine/sports;_ylt=Ajgkc7ePjx7igeUZwk7sQhO2LWRH?.intl=ph&.lang=en-ph
   (note: This is the Yahoo Philippines(?!) sport page)
7. Search for the term "Jordan"
8. Get a page with a few sections in the results:
   * News
   * Flickr Photos
   * Websites
9. If I click on "More Images" in the Flickr section, I get the UI for images on Flickr with a matrix of 12 images and the "Next" button. Working as expected.


So I guess Mike should test.
I'm also interested by Adam and Hallvord testing to see what kind of User Experience paths we get depending on the countries.
Flags: needinfo?(miket)
1. If I go directly to http://images.search.yahoo.com/search/images?p=michael+jordan
2. I get the desktop layout.
3. I can scroll in the page 
   (note that the menu on the left is transparent and with a fixed position. images "sweep" under the menu text when panning to the left).
Confirmed over here (sorry for taking so long...). This doesn't reproduce on Firefox for Android, which makes me suspect it's a core bug. Will see if I can reduce.
Here's a reduced case: https://miketaylr.com/bzla/jordan.html

Comes down to two rules:

.mobile {
  overflow-y: hidden;
}

#doc {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 100%;
  width: 100%;
}

with a structure like: 
<body class="mobile">
  <div id="doc">
    ...images...
  </div>
</body>


In Chrome Mobile and Firefox Mobile, you can scroll the images. In Firefox OS and Firefox Desktop, you can't. It seems like #doc's specificity should override .mobile's, no?
Kats, does this look like a Gecko bug?
Hm, interesting. Loading the reduced test case in FF and Chrome (desktop) both show the body element as having overflow:hidden, but in FF you can't scroll the page whereas in Chrome you can.

Then, if you look at this super-simple page:

<!doctype HTML>
<html><body style="overflow:hidden"><div style="height: 1000px"></div>bottom</body></html>

you can't scroll it in either FF or Chrome. I continued reducing your test page until I narrowed it down further - the difference is that Chrome will disallow scrolling with "overflow:hidden" but will allow scrolling with "overflow-y:hidden". This definitely seems like a Chrome bug, and our behaviour appears to be correct here.
Flags: needinfo?(bugmail.mozilla)
Ah interesting, thanks Kats. I guess with Fennec aligning with Chrome Mobile on this one, it would be hard to catch if you just tested on android browsers.
Bug id: #7059316 at Yahoo!
See also Bug 1044422
Whiteboard: [flame-1.4-exploratory] → [flame-1.4-exploratory] [js] [country-all] [sitewait]
QA Whiteboard: [QAnalyst-Triage?]
status-b2g-v2.0: --- → affected
status-b2g-v2.1: --- → affected
Flags: needinfo?(ktucker)
QA Whiteboard: [QAnalyst-Triage?] → [QAnalyst-Triage+]
Flags: needinfo?(ktucker)
fixed
Status: NEW → RESOLVED
Closed: 8 years ago
Resolution: --- → FIXED
Product: Tech Evangelism → Web Compatibility
Component: Mobile → Site Reports
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: