Layer positions appears incorrect in web app

All our symbol layers showing incorrectly in the web application. Naturally handoffs are wrong.

You can see comparison between Sketch & Web app.

Project link: Sketch

Sketch version: 98.2

Hi @yeb thanks for reporting this. I’m taking a look into this and will share an update soon


Hey @yeb , I have an update:

I could reproduce the bug: it happens when you group the symbol that contains the icon. However, in the tests I made, the issue does not happen with symbol instances as in the project you shared.

When I look at your project, I can see the positions correctly:

This could be caused by the browser’s cache. Try opening your project in a browser you normally don’t use, if you can see the correct positions, clear your regular’s browser cache.


I was able to reproduce the incorrect position outside symbol instances, when you group the icon symbol with a text layer or just the icon symbol:



However, if I group the icon or the icon + a plain text layer, I get the bug:

I’ve shared this issue with the team involved and I’ll share any updates as soon as I get them.

Hey thanks for the reply. We tried from many other browser and devices but bug is still there. Group containing icon + texts are producing incorrect positions in the web app. Like you said, when we inspecting the same component in a different page it looks normal but the issue happens in its symbol page.

Also today we discovered the same issue on different and simple components.

Can you look deeper in to this issue.

Thanks again.

Thanks for the update and additional info! I’m looking into this and will share a new update as soon as possible.

Hi @yeb I found the cause: it’s the shadows of the background layer that cause the position of other layers to display incorrectly.

Since the instances are not affected, would it be viable using them for handoff while we work on a fix?

I’ve shared this new information with the team as well.