Lists, pseudo-elements, Chrome and jQuery

I recently worked on a project where I needed to find a way of displaying an ordered list with customised numbers. When clicked, each list item would display a different image on the page and any other images would then be hidden. The list item would also then have an "active" state i.e. the text would display in a different colour and the list number would also display with a different colour. I didn't want to use background images with numbers for the ordered list items as we didn't know how many would be displayed at any one time, so this would not be a scalable solution.

I used this tutorial by Treehouse as a basis for how to display my customised ordered list - I won't go into detail about how to do this here. However I will point out that instead of using the ::before pseudo-element, I used :before to allow support for IE8.

I am writing this post to explain how I got around some of the issues I encountered. Note some elements in the code (such as class and variable names) are ficticious.

My markup looked something like this:

<ol class="list-container">

  <li>Lorem ipsum 1</li>

  <p>Paragraph ipsum 1</p> 

  <li>Lorem ipsum 2</li>

  <p>Paragraph ipsum 2</p> 

  <li>Lorem ipsum 3</li>

  <p>Paragraph ipsum 3</p>

  <li>Lorem ipsum 4</li>

  <p>Paragraph ipsum 4</p> 

</ol>
<div class="image-container">

  <ul>

    <li><img src="images/image1.png" alt=""/></li>

    <li><img src="images/image2.png" alt=""/></li>

    <li><img src="images/image3.png" alt=""/></li>

    <li><img src="images/image4.png" alt=""/></li> 

  </ul>

</div>

and my SCSS looked something like this:

.list-container {

    list-style-type: none;
    list-style-position: outside;
    counter-reset: li;

    li {

     ...

      &:before {
          position: absolute;
          top: -5px;
          left: -2em;
          width: 2em;
          display: block;
          margin: 0 10px 0 0;
          font-size: 110%;
          line-height: 44px;
          color: white; //set colour of ordered list number to white
          text-align: center;
          content: counter(li);
          counter-increment: li;
          @extend .sprites-list-bg-yellow; //use compass to generate sprites
      }
      &.active {
        &:before {
          @extend .sprites-list-bg-blue; //use compass to generate sprites
        }

       ... 

     }

Using a small amount of jQuery, I added some slide transitions for when the list items were clicked.

My jQuery looked something like this:

(function($) {
  $(document).ready(function() { 

var $myList = $('.list-container li');

var $myImage = $('.image-container li'); 

// Show first list item and first paragraph as active on page load.
    $myList.first().addClass('active').next('p').show();
    // When any list item is clicked...
    $myList.click(function() {
      var $thisPos = $(this).parent().children('li').index($(this));
      if (!$(this).hasClass('active')) {
        // ...hide any list item with class "active".
        $myList.removeClass('active').next('p').slideUp('fast');
        // ...and slide down the paragraph under the clicked list item.
        $(this).addClass('active').next('p').slideDown('fast');
        // Show the corresponding image.
        $myImage.hide().eq($thisPos).show();
      }
    });  

})(jQuery);

This pretty much met the design. However, when I tested (in IE8, IE9, Chrome, Firefox and Safari), I found that a couple of browsers weren't playing ball.

Chrome and IE8 both had trouble displaying the list once any of the items had been clicked on. In IE8 the list items seemed to slide on top of each other (almost like they needed a clear: both or something like that) and in Chrome the numbers in the :before looked like they were being sliced in two. Safari and Firefox were fine (of course).
I searched online and immediately found myself reading post-upon-post about jQuery and Chrome and artifacts on the screen.

After quite a bit of head-scratching I decided to refactor my SCSS in the :before pseudo-element. I commented out all of the properties and added them back one by one, to see what would happen. I started with the "position" attribute - when I changed its value to "relative" the list items moved out of alignment relative to their :before elements BUT when I clicked on them, I could see straight away in Chrome that the slicing bug was no longer happening. So I continued refactoring and debugging, and found that setting position to "absolute" indeed was the root of the problem. Switching it to "relative" also solved the IE8 issue where the list items were sliding on top of each other.

My finished SCSS for the :before element turned out to be something like:

&:before {
  position: relative;
  top: 1.3em;
  left: -2.4em;
  width: 2em;
  display: block;
  margin: 0 10px 0 0;
  font-size: 110%;
  line-height: 44px;
  color: white; //set colour of ordered list number to white
  text-align: center;
  content: counter(li);
  counter-increment: li;
  @extend .sprites-list-bg-yellow; //use compass to generate sprites

}

So the lesson here is, as always, test whatever you build. Even modern browsers such as Chrome could possibly have issues displaying simple functions performed by a modern library such as jQuery.

Tweet me (@theonico85) with your thoughts - don't forget to use #webdevgeekout!