Firefox 13 Rendering Websites Differently Than FF11/12
CSS and Image rendering problems ONLY with Firefox 13...
I am a web developer, so browsers displaying code differently is not foreign. What is foreign to me, is having Firefox be the only browser that's rendering the code incorrectly. Please see two examples below:
http://powellcareandrepair.web12.hubspot.com/ http://www.facebook.com/sv.capella1
In Powell Care the flash button is off by one pixel causing a white line down the side of the button. This only occurs in FF13. The site renders correctly in ie9, Chrome, Safari, Firefox 11 and Firefox 12.
In the second example the Facebook page has a profile picture which lines up with the cover photo. Again this works correctly in ie9, Chrome, Safari, Firefox 11 and Firefox 12, but not Firefox 13.
My question is what's going on here? How does code that previously worked in the last two versions of Firefox (11+12) now all of the sudden not work in 13?
Any help would be appreciated. Is there something that I've coded wrong, with the exception of Facebook which will not change. This doesn't make sense to me.
All Replies (4)
You may get lucky and have a reply here you probably have a better chance on the mozillazine forum
It is probably a good idea to check the site code compliance using the W3C validator
- http://validator.w3.org/unicorn/
- interesting to note your link does not pass, neither does this forum thread link !
Firefox does try to keep up with the standards, so there may well be some differences between versions see for instance
- Bug 695222 - Implement column-fill property of CSS3 spec
- Bug 764567 - Fix and re-land patches to support multicolumn 'column-fill' property
Note also comments in locked thread /questions/930756
P.S.
You may be able to spot something in the release notes that accounts for the difference:
Modified by John99
Those pages look seamless and sharp to me.
In case your zoom setting is a factor, press Ctrl+0 (that's a zero) to reset to default.
For the record, I've disabled smooth scrolling and graphics hardware acceleration. You could test one or both of those if you like:
(1) Smooth Scrolling
orange Firefox button or classic Tools menu > Options > Advanced
On the "General" mini-tab, uncheck the box for "Use smooth scrolling"
(2) Graphic Acceleration
You usually need to restart Firefox in order for this to take effect, so save all work first (e.g., mail you are composing, online documents you're editing, etc.).
orange Firefox button or classic Tools menu > Options > Advanced
On the "General" mini-tab, uncheck the box for "Use hardware acceleration when available"
Then restart and view your pages again. Does that make any difference?
@John99 and @jscher2000 thank you both for the replies. I'm testing some more and will keep you posted.
Interesting is the Facebook page link: http://www.facebook.com/sv.capella1 as I have no control over that, but know that it was previously working in the browsers I listed.
If use text zoom of 90% or 80% or full zoom of 110% on the http://powellcareandrepair.web12.hubspot.com/ page then the two flash object align OK, so it looks that some white space or text gets rendered differently.