The output should be:

[![enter image description here](https://i.stack.imgur.com/efHZS.png)](https://i.stack.imgur.com/efHZS.png)

but on chrome I'm getting this:

[![enter image description here](https://i.stack.imgur.com/aQUqx.png)](https://i.stack.imgur.com/aQUqx.png)

Removing the column-count property from div1 fixes it. Interestingly if you inspect and disable that property then re-enable it, everything’s fine. Is this a bug in Chrome?

```css
#div1 {
  column-count: 1;
}

#div2 {
  overflow: hidden;
  background: red;
}

#div3 {
  transform: translate3d(50px, 50px, 0px);
}
```

```html
<div id="div1">
  <div id="div2">
    <div id="div3">
      <img src="http://placehold.it/100x100&text=photo"/>
    </div>
  </div>
</div>
```