StackBlitz Liquid Tag Embed improperly sizing on mobile

[johnbwoodruff]

Describe the bug

On a mobile device the StackBlitz liquid tag slightly overflows. (see screenshot)

To Reproduce

1. Go to https://dev.to/johnwoodruff91/changelog-new-stackblitz-liquid-tag-187e
2. Scroll down to the embedded StackBlitz iframe
3. See how embedded content overflows to the right.

Expected behavior

Should properly size to 100% of the width (minus outer padding)

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Device: iPhone 7s Plus
• OS: iOS 12.1
• Browser: Safari

[johnbwoodruff]

@benhalpern I'm noticing that when sizing your screen down using Chrome or Safari's mobile device emulator, it sizes properly. I've only been able to reproduce this ON a device. See screenshot:

I'm not sure what's going on here, why it wouldn't be sizing properly. Will keep looking.

Also you can assign this to me if you want. :)

[johnbwoodruff]

Just tested it on a Samsung Android device using Chrome, and it sizes correctly as well. Looks like it's only happening on mobile Safari webviews, whether that be through Safari itself, Chrome, or the Dev iOS app, all of which of course use Safari's webview.

Any thoughts @benhalpern? I've never seen this personally.

[jessleenyc]

Thanks for flagging this. Brought it up in a meeting today and it's on @benhalpern's radar.

[stale]

Thanks for contributing to this issue. As it has been 90 days since the last activity, we are automatically closing the issue in 7 days. This is often because the request was already solved in some way and it just wasn't updated or it's no longer applicable. If this issue still requires attention, please respond with a comment. Happy Coding!

[Zhao-Andy]

Not stale, still a valid bug.