Chrome 2px border not displaying?

This is a bit of a puzzle. I’m sure there is an obvious explanation.

  1. Simple 1 scene animation: some vector lines connection about 12 rounded rectangles, plus a couple of small svg images.

  2. The rounded rectangles have 2px solid borders. The borders have no animation other than as part of the whole rectangle, which become opaque or move a little.

  3. In Chrome the border is not visible. It is invisible in both preview from Hype and embedded in a localhost one page app in development.

  4. At the same time, it is visible in both Firefox and Safari, in the embed and in preview.

  5. [And the kicker] if I change the border 1px or 3px, the border shows up no problem.

  6. The border also shows up if I turn on the inspector, which makes it darn hard to see what is going on.

Any suggestions. Yes, I could change the pixels but that would require a significant reworking of the animation.


Are you able to repeat this with a new project. ?

Also sometimes bad fonts can cause odd behaviour else where. Do yo have any added?

Are you able to post the project file so we can see what’s going on. ?

1 Like