Closed Bug 804729 Opened 10 years ago Closed 9 years ago

wikia.com rendering issues on Firefox for Android

Categories

(Web Compatibility :: Mobile, defect)

defect
Not set
normal

Tracking

(Not tracked)

VERIFIED FIXED

People

(Reporter: u408661, Assigned: karlcow)

References

()

Details

(Whiteboard: [country-all] [webkitcss] [sitewait])

Attachments

(1 file)

Visiting a wikia site in firefox for android, we get the same content served as the stock android browser, but it is rendered incorrectly. As I scroll down the page, whole blocks of display are being blanked out. Additionally, the text overflows on the horizontal axis in some places on firefox, which it does not do on the stock android browser.

Screenshots:
Firefox (note both the missing blocks as well as incorrect text display): https://www.dropbox.com/s/71szqq69e2kkkcv/2012-10-23%2012.59.32.png
Stock android: https://www.dropbox.com/s/sjmv98xc2pflci9/2012-10-23%2012.59.38.png
Just tested again there are a few issues with lines too long. It does work well on the stock Android Browser. Firefox for Android 23 works well too when in landscape mode. To be contacted.
Whiteboard: [country-all] [webkitcss] [contactready]
First attempt at contact http://twitter.com/MozWebCompat/status/390972793191665664
Assignee: nobody → kdubost
Whiteboard: [country-all] [webkitcss] [contactready] → [country-all] [webkitcss] [sitewait]
See Also: → 804727
Status: NEW → ASSIGNED
(Mike if you have an idea)

The only issue I notice now is only on the home page with slight issues on image sizes compare to the version seen in a webkit rendering engine. But I'm not sure it is the site fault. 
If I go to 

<a href="http://www.wikia.com/Lifestyle" class="wkhome-hero">
			<img class="wkhome-img" src="http://img1.wikia.nocookie.net/__cb20140403201936/corp/images/thumb/0/00/Kit-harington-jon-snow-game-of-thrones-650-430.jpg/650px-Kit-harington-jon-snow-game-of-thrones-650-430.jpg">
			<h2>Lifestyle, News &amp; Culture</h2>
		</a>

The CSS value for width on img is 
    max-width: 100%;
When I change that to 
    width: 100%. 

The image fits nicely. 
I wonder if it's a bug on our side or a combination of properties. For example, if I go there with Opera (Blink) I have no issues.

So I know how to fix it, but not sure why it doesn't work on Firefox and work on Opera.


On the other hand, they are using flexbox old syntax, but this is unrelated to this issue.

#wkSrhSub{
	border:0;
	border-radius:5px;
	-webkit-box-flex:1;
	-moz-box-flex:1;
	box-flex:1
}

#wkSrhInp{
	display:block;
	-webkit-box-flex:50;
	-moz-box-flex:50;
	box-flex:50;
	margin:0 -25px 0 -5px
}
Flags: needinfo?(miket)
See Also: → 888203
I don't see any issues now. Karl - where exactly did you see those image width problems? Can we close this as fixed?
Flags: needinfo?(kdubost)
On Firefox Android (same on Firefox OS), home page.

http://www.wikia.com/Wikia

* First two images cut on the right.
* Last image (a man dress in dark fur coat): A lot wider than the screen. See the Firefox Android screenshot
Flags: needinfo?(kdubost)
On the harrypotter page no issue. Maybe we should close this one and eventually open another one for the wikia home page.
Status: ASSIGNED → RESOLVED
Closed: 9 years ago
Resolution: --- → FIXED
Status: RESOLVED → VERIFIED
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.