# Blurried iframe \[Extension\]

**URL:** <https://staging-discuss.dev.twitch.com/t/blurried-iframe-extension/43989>\
**Category:** Extensions\
**Created:** [March 6, 2023, 6:54pm UTC](https://staging-discuss.dev.twitch.com/t/blurried-iframe-extension/43989 "2023-03-06T18:54:49Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![vittootw](https://avatars.discourse-cdn.com/v4/letter/v/f9ae1b/32.png) [@vittootw](https://staging-discuss.dev.twitch.com/u/vittootw)\
**Post date:** [March 6, 2023, 6:54pm UTC](https://staging-discuss.dev.twitch.com/t/blurried-iframe-extension/43989/1 "2023-03-06T18:54:49Z")

</div>

Hello guys!

Is it normal that if i apply the ‘auto scaling’ the extension goes blurried?

Is there any fix to this?  
I’m not that good with pixel scaling and stuffs.

Thanks a lot.

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://staging-discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [March 6, 2023, 6:55pm UTC](https://staging-discuss.dev.twitch.com/t/blurried-iframe-extension/43989/2 "2023-03-06T18:55:57Z")

</div>

> [@vittootw](#):
>
> Is it normal that if i apply the ‘auto scaling’ the extension goes blurried?

Basically yes. When it gets _super small_ or _super big_ then it’ll get weird:tm:

You could make your extension not use auto scaling instead and then it’s a “fixed” size instead.

So you’ll just need to fiddle with it to get it to how you want it

---

<div class="post-metadata">

**Author:** ![vittootw](https://avatars.discourse-cdn.com/v4/letter/v/f9ae1b/32.png) [@vittootw](https://staging-discuss.dev.twitch.com/u/vittootw)\
**Post date:** [March 6, 2023, 7:01pm UTC](https://staging-discuss.dev.twitch.com/t/blurried-iframe-extension/43989/3 "2023-03-06T19:01:29Z")

</div>

With “fiddle with it” you mean to use, for example, media queries to handle the responsiveness?

---

<div class="post-metadata">

**Author:** ![BarryCarlyon](https://d1d6mrmdu7ztse.cloudfront.net/user_avatar/staging-discuss.dev.twitch.com/barrycarlyon/32/253_2.png) [@BarryCarlyon](https://staging-discuss.dev.twitch.com/u/BarryCarlyon)\
**Post date:** [March 6, 2023, 7:09pm UTC](https://staging-discuss.dev.twitch.com/t/blurried-iframe-extension/43989/4 "2023-03-06T19:09:52Z")

</div>

An extension in compoent mode is fixed dimensions.  
And either the whole iframe is zoomed, or it isn’t. To CSS the iframe is awlays the same size  
So you can’t apply media queries to a component

---

<div class="post-metadata">

**Author:** ![vittootw](https://avatars.discourse-cdn.com/v4/letter/v/f9ae1b/32.png) [@vittootw](https://staging-discuss.dev.twitch.com/u/vittootw)\
**Post date:** [March 12, 2023, 9:30am UTC](https://staging-discuss.dev.twitch.com/t/blurried-iframe-extension/43989/5 "2023-03-12T09:30:53Z")

</div>

[Solved]

Using Backdrop-filter will broke the render of the children elements:

```auto
<div class='parent'>
    <div class='children'>
    <div class='children'>
    <div class='children'>
    ....
</div>

```

```auto
.parent{
    // ...
    backdrop-filter: blur(1rem);
    // ...
}

```

Using this pattern, all children will be blurred (not aliased) when the scale property is applied.

> **[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/v87o5zj0/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

I didn’t find a solution yet. But, this is it.