Home/ Questions/Q 8733293
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T09:37:10+00:00

If you load the following webpage code into Chrome (and smartphones) you will get

  • 0

If you load the following webpage code into Chrome (and smartphones) you will get a very strange shrinking behaviour on the img that occurs everytime the viewport crosses the 440px breakpoint. You can replicate the problem by repeatedly resizing your chrome browser smaller and then larger than 440px wide, or on your smartphone by switching back and forth between portrait and landscape. It’s actually quite hilarious when you do it several times until the image gets so small it literally just vanishes!! LOL!

Anyone know what is causing this strange behaviour and a way around it? Notable that it doesn’t happen in FireFox.

<!doctype html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <style>
    #supported-payment-options li {
      float:left;
      list-style:none;
    }
    @media (max-width: 679px) {
      img.retina-zoom { width:75%; }
    }
    @media (max-width: 440px) {
    }
  </style>
</head>
<body>

<ul id="supported-payment-options">
    <li><img class="retina-zoom" src="https://si0.twimg.com/profile_images/1695501054/book-responsive_reasonably_small.gif"></li>
</ul>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ha!, that is a funny effect. To fix it, use max-width rather than width:

    @media (max-width: 679px) {
  img.retina-zoom { max-width:75%; }
}

    Edit: Note this doesn’t happen in the latest Webkit Nightly so perhaps it’s a bug that’s been fixed.

    • 0