# Emoji modal's width incorrect on mobile

**URL:** https://meta.discourse.org/t/emoji-modals-width-incorrect-on-mobile/35460
**Category:** Bug
**Created:** [November 11, 2015, 3:41pm UTC](https://meta.discourse.org/t/emoji-modals-width-incorrect-on-mobile/35460 "2015-11-11T15:41:48Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![tgxworld](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tgxworld/32/106117_2.png) [@tgxworld](https://meta.discourse.org/u/tgxworld)
#### Post date: [November 11, 2015, 3:41pm UTC](https://meta.discourse.org/t/emoji-modals-width-incorrect-on-mobile/35460/1 "2015-11-11T15:41:48Z")

</div>

Continuing the discussion from [Help us test the rewritten Composer](https://meta.discourse.org/t/help-us-test-the-rewritten-composer/34679/16):

> [@Help us test the rewritten Composer](https://meta.discourse.org/t/help-us-test-the-rewritten-composer/34679/16):
>
> I see what you mean - the emoji popup is indeed blurry. That is not related to the new editor specifically, also in the old composer the popup is now blurry.
> 
> It looks like the blurryness is caused by the `transform` CSS statement which is now used to position the element. In previous versions this was achieved by using a negative `top` and `left` for the popup positioning.

Hmm it seems like the blurry emojis is a webkit specific issue.

> <https://stackoverflow.com/questions/27060690/using-transform-scale-results-in-blurry-images>

The use of `transform` was removed in [FIX: Don't use transform for the emoji popup, it blurs it · discourse/discourse@d7d88f8 · GitHub](https://github.com/discourse/discourse/commit/d7d88f816c6a2a4eb63e27c7319d769e0f7fbbc0) but it broke the emoji modal on mobile.

 ![](https://global.discourse-cdn.com/meta/original/3X/f/0/f0804803062bb32d1d53bda93b87b55a65233ca8.png)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [November 11, 2015, 5:34pm UTC](https://meta.discourse.org/t/emoji-modals-width-incorrect-on-mobile/35460/2 "2015-11-11T17:34:39Z")

</div>

Another composer rewrite regression @eviltrout

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [November 11, 2015, 7:22pm UTC](https://meta.discourse.org/t/emoji-modals-width-incorrect-on-mobile/35460/3 "2015-11-11T19:22:13Z")

</div>

I prefer to call them “curiosities” rather than “regressions.”

[https://github.com/discourse/discourse/commit/393a05ed9efb9715bd4e12f1975008e4e368fb3e](https://github.com/discourse/discourse/commit/393a05ed9efb9715bd4e12f1975008e4e368fb3e)

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [November 11, 2015, 7:34pm UTC](https://meta.discourse.org/t/emoji-modals-width-incorrect-on-mobile/35460/4 "2015-11-11T19:34:01Z")

</div>

![](https://global.discourse-cdn.com/meta/original/3X/4/2/4246e13976f7cb6055f9a85de76d9d8659838d0e.jpg)

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [November 11, 2015, 7:35pm UTC](https://meta.discourse.org/t/emoji-modals-width-incorrect-on-mobile/35460/5 "2015-11-11T19:35:03Z")

</div>



---

<div class="post-metadata">

### Author: ![tgxworld](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tgxworld/32/106117_2.png) [@tgxworld](https://meta.discourse.org/u/tgxworld)
#### Post date: [November 11, 2015, 11:04pm UTC](https://meta.discourse.org/t/emoji-modals-width-incorrect-on-mobile/35460/6 "2015-11-11T23:04:23Z")

</div>

Hehe not a composer regression. I was the one that introduced `transform` previously while making emoji modal work on mobile.

---

<div class="post-metadata">

### Author: ![tgxworld](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tgxworld/32/106117_2.png) [@tgxworld](https://meta.discourse.org/u/tgxworld)
#### Post date: [November 11, 2015, 11:12pm UTC](https://meta.discourse.org/t/emoji-modals-width-incorrect-on-mobile/35460/7 "2015-11-11T23:12:52Z")

</div>

![](https://global.discourse-cdn.com/meta/original/3X/2/a/2a421749b880b10ca5bdc9cdc82041578d303a04.png)

Ah this is not the same bug and might be related to the composer rewrite. I can’t insert an emoji from the modal.

---

<div class="post-metadata">

### Author: ![tgxworld](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tgxworld/32/106117_2.png) [@tgxworld](https://meta.discourse.org/u/tgxworld)
#### Post date: [November 12, 2015, 2:27am UTC](https://meta.discourse.org/t/emoji-modals-width-incorrect-on-mobile/35460/8 "2015-11-12T02:27:57Z")

</div>

Fixed in  
[https://github.com/discourse/discourse/pull/3896](https://github.com/discourse/discourse/pull/3896)