1

This feels new to me, or at least it's just started happening on our site.

Previously I'd be able to put a tracking pixel on our website with a height and width of 0 and it would be hidden from the page. Something like this <img height="0" width="0" src="someurl.com" /> and it would effectively be hidden from the browser. Now I'm seeing that it has a height in the browser.

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <style>
      * { margin: 0; padding: 0 }
      .main { height: 100vh; background-color: red; }
    </style>
  </head>
  <body>
    <div class="main">
      text
    </div>
    <img height="0" width="0" />
  </body>
</html>

When I run that code in the browser, I'm seeing a strip at the bottom of the page, where the img tag is taking up space.

I can fix this by targeting the image and setting its display to none, the pixel resource will still be loaded, but I'm wondering if anyone else has experienced this recently or if I've just forgotten some fundamental thing?

Chrome version: 103.0.5060.53

Firefox version: 102.0

Safari version: 15.0 (16612.1.29.41.4, 16612)

Brett East
  • 4,022
  • 2
  • 20
  • 31
  • 1
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#styling_with_css " is a replaced element; it has a display value of inline by default,..." Hence the white space. So, you could set it to display: none to override the browser's default – AStombaugh Jun 29 '22 at 17:09
  • @AStombaugh thanks for the link, and certainly setting the display of an img to `block` does fix this. But I'm wondering if the way browsers handle this has changed recently, as this has only started happening for us since yesterday or so, and I'm finding documentation that recommends using `height="0" and width="0"` like this https://www.seobility.net/en/wiki/Tracking_Pixels#:~:text=Integration%20of%20a%20tracking%20pixel%20into%20HTML%20code,-Tracking%20pixels%20can&text=The%20style%20attributes%20%22visibility%3Ahidden,tracking%20pixel%20from%20being%20displayed. – Brett East Jun 29 '22 at 17:30
  • 1
    I can't seem to locate any recent information that would suggest that this was ever not the case, so I can't really give you a straight answer on that, unfortunately. Here's a question from 2010 where the answer and comments have some sources explaining why images are treated this way, so if it goes that far back I can't imagine it was recent. Did anything else on your site change that may have interfered with the img? https://stackoverflow.com/questions/2402761/is-img-element-block-level-or-inline-level?answertab=scoredesc#tab-top – AStombaugh Jun 29 '22 at 18:07
  • 2
    Browsers changed this around 20-25 years ago, basically when they started recognising some doctypes as giving standards mode. Prior to that, browsers behaved more akin to what we now call quirks mode. In quirks mode, which can still be obtained by omitting the doctype from your page, the img element in your scenario would add no height to the container. – Alohci Jun 29 '22 at 18:16
  • My suspicion is that the third-party that provides the pixel just recently started injecting an image tag into our html, rather than whatever they were doing previously - hard to verify though, because old versions of the app are still running their new code. I think it's just because I've been writing height="0" and width="0" for tracking pixels for years and haven't seen this behaviour. Like even the facebook tracking pixel still recommends doing this. Thank you both for your answers/help though. – Brett East Jun 29 '22 at 18:48

0 Answers0