622149 - overlapping text on main deal at touch.groupon.com

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect)

Description

[Tony Chung [:tchung]]

Attachment: overlaying text on groupon screenshot

Screenshot says it all.   Some kind of text overlay issue.

This doesnt reproduce on Android browser.

Repro:
1) launch fennec nightly 12/30 build.  (i used nexus one, thomas had a droid 2)
2) visit URL, click see this deal
3) scroll down, and click "more about this deal"
4) Verify the fine print overlays the main coupon

Expected:
- more about this deal should shift the page down to show the fine print details

Actual:
- ugly text overlays

Comment 1

[Vivien Nicolas (:vingtetun) (:21) - (NOT reading bugmails, needinfo? please)]

Matt, could it be a side effect of text reflow?

Comment 2

[Brad Lassey [:blassey] (use needinfo?)]

(In reply to comment #0)
> Created attachment 500371 [details]
> overlaying text on groupon screenshot
> 
> Screenshot says it all.   Some kind of text overlay issue.
> 
> This doesnt reproduce on Android browser.
> 
> Repro:
> 1) launch fennec nightly 12/30 build.  (i used nexus one, thomas had a droid 2)
> 2) visit URL, click see this deal
> 3) scroll down, and click "more about this deal"
> 4) Verify the fine print overlays the main coupon
> 
> Expected:
> - more about this deal should shift the page down to show the fine print
> details
> 
> Actual:
> - ugly text overlays

Tony, did you zoom in at all?

Comment 3

[Tony Chung [:tchung]]

nope, no zoom at all.  touch.groupon.com seems to be the mobile version of groupon.  i can still reproduce this with steps from comment 0 on the 1/6/2011 build.

Comment 4

[Tony Chung [:tchung]]

(In reply to comment #3)
> nope, no zoom at all.  touch.groupon.com seems to be the mobile version of
> groupon.  i can still reproduce this with steps from comment 0 on the 1/6/2011
> build.

additional info: toggling Reformat Zoom on Text option to On or OFF doesnt matter.  still can reproduce either way.

Comment 5

[Mark Finkle (:mfinkle) (use needinfo?)]

From what I can see in the page source, this mobile website uses a few <div>s to create a stack of pages. The is the main page, the list of cities page and the more info page. They are all stacked on top of each other, but only one is supposed to be visible.

Somehow, the backgrounds are transparent (or something) and multiple pages are showing through each other. That causes the "overlay" effect.

Comment 6

[Mark Finkle (:mfinkle) (use needinfo?)]

I can reproduce on desktop Linux build, so I'll try using DOM Inspector to dig around.

Comment 7

[Mark Finkle (:mfinkle) (use needinfo?)]

Damn, DOMi and e10s don't mix yet :(

Comment 8

[Mark Finkle (:mfinkle) (use needinfo?)]

However, this also happen in desktop Firefox!

Looks like two positioned divs (positioned on top of each other) are both | display: block | because they are both | class="current *" |

There is a lot of webkit specific code in the website. Might be part of the problem. Can we contact someone at Groupon to fix this?

Comment 9

[Tony Chung [:tchung]]

(In reply to comment #8)
> However, this also happen in desktop Firefox!
> 
> Looks like two positioned divs (positioned on top of each other) are both |
> display: block | because they are both | class="current *" |
> 
> There is a lot of webkit specific code in the website. Might be part of the
> problem. Can we contact someone at Groupon to fix this?

Sunil Gupta!

Comment 10

[Mark Finkle (:mfinkle) (use needinfo?)]

evangelism bugs don't block

Comment 11

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

I see no problems now