Sprite Clipped in Safari

[ggohierroy]

So, I'm using the stock component in City of the Big Shoulders, and some users are reporting that on iPhone and iPad, the sprites look bad.

I investigated, and the reason is that Safari scales the content for the iPhone and iPad, which makes the sprite go bonkers.

Has anyone found a solution for that?

See image here

[Tisaac]

Use percents instead of fixed size for the background sizing and position ?

[ggohierroy]

Use percents instead of fixed size for the background sizing and position ?

Is that even possible with the stock component? In the documentation, it seems everything has to be specified in pixels.

[hersh]

I've never noticed that during my plays. Also I've always seen the full picture on my iPhone/iPad while playing City of the Big Shoulders. I haven't noticed it in any other games I've worked on either.

I did notice your html seems off. maybe that's causing? when I html debug in chrome I see tags like

Code: Select all

<div id="henderson_factory_2" class="factory" style="left:158px; width:93px;" <="" div=""><div id="henderson_automation_holder_2_0" class="automation_holder" style="left:56px;" <="" div="">

<="" div=""> what are these tags? maybe that's throwing off some browsers?

[ggohierroy]

<="" div=""> what are these tags? maybe that's throwing off some browsers?

Good catch! I fixed those, but sadly it doesn't fix the problem.

Are you using Safari? I don't have an iPhone, but I can reproduce the bug by using Safari on my Mac and using the responsive design mode. Safari scales the content of the page and the sprites get all messed up.

Works perfectly on Firefox and Chrome for all devices.

[hersh]

yes I use safari on ipad/iphone. I just double-checked and I do see the issue on my iPhone when in portrait mode. I guess I never noticed cause I always play in landscape mode.

In portrait mode I know BGA platform adds css zoom. once css zoom is removed (by clicking the magnify glass) it looks ok.

strange. I use stockitem a lot in Bohnanza and haven't come across the same issue.

[ggohierroy]

strange. I use stockitem a lot in Bohnanza and haven't come across the same issue.

So, after playing around a bit with the sprite and how the stock component works, I found the issue.

There is definitely a problem with the stock component in that the background-position property, which is calculated in percent, does not properly take into account the scaling that Safari does.

It's almost imperceptible to the eye when the assets are large enough, compared to the size of the sprite.

In my case, the resources are very small, and part of a larger tokens.png sprite, so the difference is noticeable. When I put the resources by themselves in a resources.png sprite, then the problem almost disappears.

Cheers!

[hersh]

Hmmm I’m not sure what you mean by scaling safari does. But is the background position always a whole numbers?

I have only used stock component with one sprite for all types. Didn’t even know you could get it to start/end at a specific point in the sprite. Separate makes sense.

[fafa-fr]

Isn't this related to this issue? (didn't take the time to see if it's actually the same)
Bug fix for Carcassonne display

[ggohierroy]

Isn't this related to this issue? (didn't take the time to see if it's actually the same)
Bug fix for Carcassonne display

Yes it's the exact same problem!