Posts and Pages Tagged ‘Firefox 10’

jQuery fadeOut in Firefox 10 Last updated:20 June 2012

Having an odd week this week.

While viewing a client’s site today in Firefox 10 I noticed that the crossfade on the site, loaded just before Christmas, wasn’t quite right – the images should crossfade into one another (using this script), but what happened was the image faded to black and then the next image appeared. I observed the same effect on the malsup cycle plugin, used elsewhere on the site.

Now the same script works fine in Opera 11 and Chrome, and it works fine in Firefox 10 on my demo page listed above. So what’s the difference? The only difference is that one image has a border, and one doesn’t. Add the border and the crossfade works fine, take it away and it doesn’t. Here’s a cut down illustration – the left hand image has a border and fades to transparent, the right hand image has no border and fades to black then transparent.

Having checked a couple of other sites I’ve built, if the image is wrapped in div, all seems to be OK as well, it’s just an issue with images.

This is only an issue in Firefox 10 as far as I can see. FF9 is fine.

I’ve logged this as a bug with jQuery. If you’ve come across the same issue please leave a comment below, or, if you’ve got a spare second and Firefox 10, have a look at the test page and let me know if you see the same thing. Apparently it’s OK on Mac/OS X. I’m on W7 Pro 64-bit.

Update 10 February Thanks to Oblik for the updates below – this is reported as a Firefox bug as well. It also seems that applying background-color to the image also solves the problem. I’ve further noted that this does not affect a different machine running W7 Home with FF10 – the links suggest it may be related to the graphics card.

Update 18 February This looks like it’s mostly likely to get resolved by a Firefox update to me. I’ve noticed the problem today on another couple of sites. It’s now being logged under this ticket.

Update 24 April Still not fixed in FF11…I’ve noticed the problem a lot on a wide variety of sites. Looks like it might be scheduled for a fix in FF13.

Update 20 June Fixed in FF13!!

Tags: ,
Posted in Web Design and Build | 7 Comments

page-break-after failing with position:absolute and floated elements Last updated:7 February 2012

In the last couple of days I’ve been working on a small application to print raffle ticket numbers, which requires a certain number of tickets to be printed per page. In a simple case I was able to generate four consecutive numbers per page and then enforce a page-break via page-break-after:always. So far so good.

I then floated some elements within the page, which caused the page break to fail in every browser I tried (including FF10 and Opera 11 – and if it doesn’t work in both of those, something’s wrong…). This persisted even with the floated elements enclosed in non-floated elements to which page-break-after was applied. Some Googling suggested floats don’t play nicely at all with page-break, so with gritted teeth I used tables instead, and all was well.

Later, I needed use absolute positioning for the ticket numbers. You can’t use absolute positioning directly within a td element, so I included a div nested within the td. This broke the page-break again. Fine without absolute positioning, broken with – tested in FF10. Amazingly this fails in FF10 but works in IE8 (and that’s not a phrase I’ve written often). Investigating this I added a border to the td element, just so I could see what was happening on the page, and all of a sudden everything was fine again. By experimentation, a single border on the td fixes the problem in FF10 – even if it’s transparent. Weird.

So, to summarise, with the following html structure:

<table>
<tr>
<td><div><p>Some text</p></div></td>
</tr>
</table>

and this css:

table{page-break-after:always}
div{position:relative}
p{position:absolute}

then Firefox 10 does not honour the page-breaks, but IE8 does. Making the css:

table{page-break-after:always;}
td{border-bottom:1px solid transparent}
div{position:relative}
p{position:absolute}

results in Firefox 10 printing correctly.

Tags: , ,
Posted in Web Design and Build | 2 Comments