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!!

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.

CSS3PIE/PIE.htc and https and IE6 Last updated:21 November 2012

Came across an interesting one last week using https on an Opencart installation. After implementing https I discovered that all the secure pages generated a warning in IE6: “This page contains both secure and insecure items”. I couldn’t work out why this was happening at all and ended up with a test page with virtually nothing on it still generating the error.

After some more messing about it became apparent that the error was being caused by the CSS3PIE code – specifically the use of a reference to url(about:blank) in the script. There’s more info here. The suggested solution is to replace a.backgroundImage="url(about:blank)" with a.backgroundImage="none" which seems to have done the trick for me. I was a little nervous about that replacement so have created a separate version of PIE.htc just for IE6, with no problems so far.

Posted here in case anyone else has the issue as it took me a while to find the solution.

Multiple images on WP e-Commerce product pages Last updated:21 April 2014

Dismayed this morning to find that WP e-Commerce does not support multiple images on a product page unless you pay for the “gold cart” option. Since I’m basically stingy, I did it myself. Here’s how:

Original fix, WP3.5, WPEC 3.8.7.6

I replaced this code in wpsc-single_product.php:

   <?php if ( wpsc_the_product_thumbnail() ) : ?>
      <a rel="<?php echo wpsc_the_product_title(); ?>" class="<?php echo wpsc_the_product_image_link_classes(); ?>" href="<?php echo wpsc_the_product_image(); ?>">
         <img class="product_image" id="product_image_<?php echo wpsc_the_product_id(); ?>" alt="<?php echo wpsc_the_product_title(); ?>" title="<?php echo wpsc_the_product_title(); ?>" src="<?php echo wpsc_the_product_thumbnail(get_option('product_image_width'),get_option('product_image_height'),'','single'); ?>"/>
      </a>
      <?php if ( function_exists( 'gold_shpcrt_display_gallery' ) )
         echo gold_shpcrt_display_gallery( wpsc_the_product_id() );
      ?>
   <?php else: ?>

with this code:

   <?php if ( wpsc_the_product_thumbnail()) ://if the product has any images...
      if (has_post_thumbnail()): //...display the thumbnail if there is one...?>
         <a rel="lightbox[<?php echo wpsc_the_product_title(); ?>]" class="<?php echo wpsc_the_product_image_link_classes(); ?>" href="<?php echo wpsc_the_product_image(); ?>">
         <?php echo get_the_post_thumbnail(wpsc_the_product_id(),'thumbnail',array('alt' => wpsc_the_product_title(),'title' => wpsc_the_product_title() ));?>
         </a>
      <?php endif;
      sb_get_images_for_product(wpsc_the_product_id());//...and then display all the rest of the images
else: ?>

I’ve used the standard WP function get_the_post_thumbnail() instead of the WP e-commerce function wpsc_the_product_thumbnail() simply to ensure a consistent display of thumbnails. So, I’m displaying the product thumbnail and then using a custom function sb_get_images_for_product() to retrieve any other images associated with the product. This function effectively replaces the gold_shpcrt_display_gallery() function for which you have to pay. I saved sb_get_images_for_product() in the functions.php (located in the theme folder). This function retrieves all images attached to the post and then displays any which are not the thumbnail – we’ve already displayed that. Here’s the code (last tested against WP 3.5):

function sb_get_images_for_product($id){
   global $wpdb;
   $post_thumbnail = get_post_thumbnail_id();//read the thumbnail id
   $attachments = $wpdb->get_results($wpdb->prepare("SELECT * FROM $wpdb->posts WHERE post_parent = $id AND post_type = 'attachment' ORDER BY menu_order ASC",$id));
   foreach ($attachments as $attachment){
      if ($attachment->ID <> $post_thumbnail){//if we haven't already got the attachment as the post thumbnail
         $image_attributes = wp_get_attachment_image_src($attachment->ID,'thumbnail');?>
	<a rel="lightbox[<?php echo wpsc_the_product_title(); ?>]" href="<?php echo $attachment->guid; ?>" class="<?php echo wpsc_the_product_image_link_classes(); ?>">
	<img src="<?php echo $image_attributes[0]; ?>" alt="<?php echo wpsc_the_product_title(); ?>"/>
	</a>
   <?php }		
   }
}

Note that WP 3.3 changed the way images work and messed up the WP e-commerce product images on version 3.8.7.4, with the result that it's possible to have a product without a product thumbnail. This is fixed with WP e-commerce version 3.8.7.6. However, I've added the if (has_post_thumbnail()) condition in the first code snippet above to trap this. Thanks to Brian for flagging this up.

Updated 21 April 2014, tested against WP 3.9, WPSC 3.8.13.4

Somewhere along the line, in conjunction with core WP galleries, WPEC has changed the way additional images are handled, and the fix above no longer works. Now try making this replacement in wpsc-single_product.php. Change this:

<?php
if ( function_exists( 'gold_shpcrt_display_gallery' ) )
   echo gold_shpcrt_display_gallery( wpsc_the_product_id() );
?>

with this:

<?php
	sb_get_images_for_product(wpsc_the_product_id());//...and then display all the rest of the images
?>

and add this to your functions.php:

function sb_get_images_for_product($id){
   $post_thumbnail = get_post_thumbnail_id();//read the thumbnail id
   
   $atts = get_post_meta($id,'_wpsc_product_gallery');
   
   $attachments = $atts[0];
   
   foreach ($attachments as $attachment){
      if ($attachment<> $post_thumbnail){//if we haven't already got the attachment as the post thumbnail
         $image_attributes = wp_get_attachment_image_src($attachment,'post-thumbnail');
		 $full_image_attributes = wp_get_attachment_image_src($attachment,'full');
		 ?>
	<a rel="lightbox[<?php echo wpsc_the_product_title(); ?>]" href="<?php echo $full_image_attributes[0]; ?>" class="<?php echo wpsc_the_product_image_link_classes(); ?>">
	<img src="<?php echo $image_attributes[0]; ?>" alt="<?php echo wpsc_the_product_title(); ?>"/>
	</a>
   <?php }		
   }
}

Heart Internet and CSS3PIE/PIE.htc Last updated:6 February 2012

Discovered this evening that a website I’d built a month or so ago using CSS3PIE for box-shadow and border-radius had lost both of these. I’d just made a couple of changes so at first I thought I’d messed something up, but after backing all the changes out only to find the problem was still there, and then discovering all was fine using xampp locally, it looks to me like Heart have changed something on their servers. I fixed the problem by using a php file which forces the PIE.htc file to be served as the correct content type – see the CSS3PIE pages for the details of this.

Just thought I’d post this in case anyone else is searching for the same issue.