730353 - Layout issues for disney.com

Status: VERIFIED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Cristian Nicolae (:xti)]

Attachment: Screenshot - Nightly

Firefox 13.0a1 (2012-02-24)
20120224031039
http://hg.mozilla.org/mozilla-central/rev/cd120efbe4c6
Device: Motorola Droid 2
OS: Android 2.3.3

Steps to reproduce:
1. Open Fennec
2. Go to disney.com
3. Pan the videos lists left/right
4. Switch device orientation to landscape
5. Scroll the page up/down

Expected result:
After step 2, page is loaded correctly. The videos lists can be panned without any issues. Also scrolling the page in landscape mode should work fine.

Actual result:
After step 2, videos are half displayed on the left side of the screen as you can see in the attached screenshot.
After step 5, the page will bounce back to its header or footer.

Comment 1

[Cristian Nicolae (:xti)]

Attachment: Screenshot - Stock browser

Comment 2

[Jason Smith [:jsmith]]

Webkit properties being used without moz equivalents in their CSS source:

-webkit-gradient
-webkit-transition
-webkit-backface-visibility
-webkit-perspective
-webkit-transform

Direct link to CSS source: http://a.dolimg.com/en-US/disneymobile/css/global.css

Comment 3

[Jason Smith [:jsmith]]

All of the CSS properties in comment 2 do have moz equivalents.

Comment 4

[Jason Smith [:jsmith]]

On Chrome, we see lots of webkit-transition properties evident on this page. That's likely the problem here, as it appears to be a very frequent CSS property (also that this a slideshow on mobile).

Example of CSS properties seen in the HTML source:

style="position: absolute; float: none; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 0ms; -webkit-transition-timing-function: initial; -webkit-transition-delay: initial; -webkit-transform: translate3d(624px, 0px, 0px); "

Comment 5

[Jason Smith [:jsmith]]

Apparently Disney has updated their site after Ron & I worked with them - which gives us a nice HTML 5 touch site. No more layout issues. Closing.