804729 - wikia.com rendering issues on Firefox for Android

Status: VERIFIED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[u408661]

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

Comment 1

[Karl Dubost💡 :karlcow]

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.

Comment 2

[Karl Dubost💡 :karlcow]

First attempt at contact http://twitter.com/MozWebCompat/status/390972793191665664

Comment 3

[Karl Dubost💡 :karlcow]

(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
}

Comment 4

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

I don't see any issues now. Karl - where exactly did you see those image width problems? Can we close this as fixed?

Comment 5

[Karl Dubost💡 :karlcow]

Attachment: Screenshot_2014-04-07-21-54-01.png

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

Comment 6

[Karl Dubost💡 :karlcow]

On the harrypotter page no issue. Maybe we should close this one and eventually open another one for the wikia home page.