# Sprite trimming in html problems (#4645)(SOLVED)

**URL:** <https://forum.defold.com/t/sprite-trimming-in-html-problems-4645-solved/64394>\
**Category:** Bugs\
**Created:** [February 5, 2020, 3:42pm UTC](https://forum.defold.com/t/sprite-trimming-in-html-problems-4645-solved/64394 "2020-02-05T15:42:51Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![d954mas](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/d954mas/32/5401_2.png) [@d954mas](https://forum.defold.com/u/d954mas)\
**Post date:** [February 5, 2020, 3:42pm UTC](https://forum.defold.com/t/sprite-trimming-in-html-problems-4645-solved/64394/1 "2020-02-05T15:42:51Z")

</div>

I have a collection, for card. It have bottom bg and top bg sprites. And some info: letter sprite and cost sprite.

 ![char_view_top](https://forum-defold-uploads.b-cdn.net/original/3X/0/d/0de858bc6734a8bb7f69832c239e9b1146207f5f.png) ![char_view_bottom](https://forum-defold-uploads.b-cdn.net/original/3X/c/a/ca54310f7c5d351887ff733365f7715dd3c4d3b2.png)  
I enable sprite trimming, for bg sprite(it have some alpha,on borders).  
In desktop all worked.  
But in html, it looks like z level was broken.

It should start from closed position, then rotate to opened position.  
But in html it start from opened position, then rotate to closed position.Also info sprites was disappered.

worked

 ![worked](https://forum-defold-uploads.b-cdn.net/original/3X/5/f/5f5d43322115f5837cfb94f12988ef55470f0a73.png)  
not worked  
 ![notworked_html](https://forum-defold-uploads.b-cdn.net/original/3X/8/e/8e1b3ae2d2e54569b8e299601a92161093d20e93.png)

---

<div class="post-metadata">

**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [February 5, 2020, 4:17pm UTC](https://forum.defold.com/t/sprite-trimming-in-html-problems-4645-solved/64394/2 "2020-02-05T16:17:57Z")

</div>

Thank you for the report. Can you share a small repro project for @JCash to take a look at?

---

<div class="post-metadata">

**Author:** ![d954mas](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/d954mas/32/5401_2.png) [@d954mas](https://forum.defold.com/u/d954mas)\
**Post date:** [February 5, 2020, 4:21pm UTC](https://forum.defold.com/t/sprite-trimming-in-html-problems-4645-solved/64394/3 "2020-02-05T16:21:39Z")

</div>

Yes. I will try to make, small repro case, tommorow.

---

<div class="post-metadata">

**Author:** ![d954mas](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/d954mas/32/5401_2.png) [@d954mas](https://forum.defold.com/u/d954mas)\
**Post date:** [February 6, 2020, 9:02am UTC](https://forum.defold.com/t/sprite-trimming-in-html-problems-4645-solved/64394/4 "2020-02-06T09:02:22Z")

</div>

Small repro case.  
It using perspective camera.  
I make a copy of card collection(word\_char.collection) from my game. That collection use custom materials for every part(4 material).  
Custom for fg,bg,char,number. All material, same except tag. I need that for fixing rotation.(with one material, was z fighting)

For that case, i make 4 different collection.  
word\_char.collection - 4 material no trim. Worked  
word\_char\_material\_1.collection - 1 material no trim. Worked  
word\_char\_trim.collection - 4 material trim. Not worked.  
word\_char\_trim\_material\_1.collection - 1 material trim. Not worked.

It have 5 collections.All worked correct on desktop.  
Problem with html build.

1)main - contains all from 2-5. All not worked. Looks like using any sprite with trimming break all.  
2)main base. word\_char.collection. Worked  
3)main base\_material1. word\_char\_material\_1.collection. Worked  
4)main\_base\_trim. word\_char\_trim.collection. Not worked  
5)main\_base\_trim\_material\_1. word\_char\_trim\_material\_1.collection. Not worked

[sprite\_trim\_html\_problem.zip](https://defold-forum-bucket.nbg1.your-objectstorage.com/original/3X/c/9/c99f530072657bf07c1ee862aa118c215ad67a4b.zip) (40.8 KB)

---

<div class="post-metadata">

**Author:** ![Mathias\_Westerdahl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/mathias_westerdahl/32/228_2.png) [@Mathias\_Westerdahl](https://forum.defold.com/u/Mathias_Westerdahl)\
**Post date:** [February 7, 2020, 8:14am UTC](https://forum.defold.com/t/sprite-trimming-in-html-problems-4645-solved/64394/5 "2020-02-07T08:14:18Z")

</div>

We have a fix for this, and it will be shipped in 1.2.166.

In short, it was a polygon winding issue, they were flipped around.  
The reason I didn’t notice it before was that we have backface culling disabled by default.

Why the editor didn’t show the same symptoms is another matter I’m looking in to.

---

<div class="post-metadata">

**Author:** ![AGulev](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/agulev/32/4541_2.png) [@AGulev](https://forum.defold.com/u/AGulev)\
**Post date:** [March 7, 2020, 8:21pm UTC](https://forum.defold.com/t/sprite-trimming-in-html-problems-4645-solved/64394/6 "2020-03-07T20:21:12Z")

</div>

[Solved in 1.2.166](https://forum.defold.com/t/defold-1-2-166-has-been-released/64558)
