koimemo.com - A zoomed -in version of the site is displayed

[webcompat-bot]

URL: https://koimemo.com/article/10392

Browser / Version: Firefox Mobile 68.0
Operating System: Android 6.0.1
Tested Another Browser: Yes

Problem type: Site is not usable
Description: The paragraph is not display to the end.
Steps to Reproduce:

Browser Configuration

• gfx.webrender.all: false
• gfx.webrender.blob-images: true
• gfx.webrender.enabled: false
• image.mem.shared: true
• buildID: 20191206211220
• channel: nightly
• hasTouchScreen: true
• mixed active content blocked: false
• mixed passive content blocked: false
• tracking content blocked: true (strict)

Console Messages:

['[JavaScript Warning: "The resource at https://platform.twitter.com/widgets.js was blocked because content blocking is enabled." {file: "https://koimemo.com/article/10392" line: 0}]', '[JavaScript Warning: "The resource at https://securepubads.g.doubleclick.net/tag/js/gpt.js was blocked because content blocking is enabled." {file: "https://koimemo.com/article/10392" line: 0}]', '[JavaScript Warning: "The resource at https://securepubads.g.doubleclick.net/tag/js/gpt.js was blocked because content blocking is enabled." {file: "https://koimemo.com/article/10392" line: 0}]', '[JavaScript Warning: "The resource at https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.11 was blocked because content blocking is enabled." {file: "https://koimemo.com/article/10392" line: 0}]', '[JavaScript Warning: "The resource at https://www.google-analytics.com/analytics.js was blocked because content blocking is enabled." {file: "https://koimemo.com/article/10392" line: 0}]', '[JavaScript Warning: "The resource at https://connect.facebook.net/en_US/fbevents.js was blocked because content blocking is enabled." {file: "https://koimemo.com/article/10392" line: 0}]']

From webcompat.com with ❤️

[cipriansv]

Thanks for the report.
I was indeed able to reproduce the issue.

Tested with:
Browser / Version: Firefox Nightly Mobile 68.4a1 (2019-12-08), Chrome Mobile 78.0.3904.108

Operating System: Huawei P10 (Android 9.0) - 1080 x 1920 pixels (~432 ppi pixel density)

This is the web page displayed in Firefox Nightly:

And this is the web page displayed in Chrome:

The issue is also reproducible on Firefox Preview Nightly 191205 (🦎: 72.0a1-20191202091209)

[karlcow]

Antiquated flexbox

.l-wrapper, .inner {
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	display: -webkit-flex;
	flex-flow: row wrap;
	-webkit-flex-flow: row wrap;
}

To fix it:

/* koimemo_common.css | https://koimemo.com/css/koimemo_common.css */

.l-wrapper, .inner {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
}

@media screen and (max-width: 1024px) {
		.l-breadcrumbs {
				/* -webkit-order: 5; */
		}
}

@media screen and (max-width: 1024px) {
		.l-content {
				/* -webkit-order: 2; */
				/* flex-basis: 100%; */
				/* -webkit-flex-basis: 100%; */
				flex-basis: auto;
		}
}

[karlcow]

Close as duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1316534

[lock]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue at https://webcompat.com/issues/new if you are experiencing a similar problem.