namu.wiki - Page does not fit the screen after switch from landscape to portrait mode

Taegeonlee commented 5 years ago

URL: https://namu.wiki/w/%ED%8C%8C%EC%9D%B4%EC%96%B4%ED%8F%AD%EC%8A%A4(%EC%9B%B9%20%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80)

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

Problem type: Design is broken Description: when rotating from landscape to portrait, page did not fit a screen and could not restore to normal condition Steps to Reproduce: https://bugzilla.mozilla.org/show_bug.cgi?id=1523844

I believe this bug is related.

Browser Configuration

None

From webcompat.com with ❤️

Taegeonlee commented 5 years ago

{ "application": { "name": "Fennec", "osVersion": "Linux 28", "version": "68.0a1", "buildID": "20190507094727", "userAgent": "Mozilla/5.0 (Android 9; Mobile; rv:68.0) Gecko/68.0 Firefox/68.0", "safeMode": false, "updateChannel": "nightly", "supportURL": "https://support.mozilla.org/1/mobile/68.0a1/Android/ko/", "numTotalWindows": 1, "numRemoteWindows": 0, "remoteAutoStart": false, "autoStartStatus": 2, "keyLocationServiceGoogleFound": true, "keySafebrowsingGoogleFound": true, "keyMozillaFound": true }, "securitySoftware": { "registeredAntiVirus": "", "registeredAntiSpyware": "", "registeredFirewall": "" }, "processes": { "remoteTypes": {}, "maxWebContentProcesses": 8 }, "modifiedPreferences": { "browser.cache.disk.filesystem_reported": 1, "browser.cache.disk.amount_written": 1011642, "browser.cache.disk.smart_size.first_run": false, "browser.cache.disk.capacity": 524288, "browser.cache.disk.telemetry_report_ID": 3, "browser.download.preferred.application/pdf": "org.mozilla.gecko.Download", "browser.search.suggest.enabled": true, "browser.search.useDBForOrder": true, "browser.startup.homepage_override.mstone": "68.0a1", "dom.event.touch.coalescing.enabled": true, "dom.presentation.device.name": "Pixel 3", "extensions.lastAppVersion": "68.0a1", "font.size.inflation.minTwips": 138, "font.size.systemFontScale": 115, "general.useragent.updates.lastupdated": "1556960890727", "gfx.bundled_fonts.force-enabled": true, "gfx.webrender.all": true, "gfx.webrender.enabled": true, "gfx.layerscope.enabled": true, "idle.lastDailyNotification": 1557179357, "layers.omtp.enabled": true, "media.gmp.storage.version.observed": 1, "media.gmp-gmpopenh264.lastUpdate": 1555627043, "media.gmp-gmpopenh264.version": "1.8.1", "media.gmp-manager.buildID": "20190506130308", "media.gmp-gmpopenh264.abi": "aarch64-gcc3", "media.gmp-manager.lastCheck": 1557209858, "network.prefetch-next": false, "network.http.speculative-parallel-limit": 0, "network.dns.disablePrefetch": true, "network.trr.mode": 3, "network.predictor.enabled": false, "network.trr.bootstrapAddress": "1.1.1.1", "network.predictor.cleaned-up": true, "network.security.esni.enabled": true, "privacy.donottrackheader.enabled": true, "privacy.trackingprotection.enabled": true, "security.remote_settings.intermediates.checked": 1557209889, "storage.vacuum.last.index": 0 }, "lockedPreferences": {}, "media": { "currentAudioBackend": "opensl", "currentMaxAudioChannels": 2, "currentPreferredSampleRate": 48000, "audioOutputDevices": [ { "name": "", "groupId": "", "vendor": "", "type": 2, "state": 2, "preferred": 15, "supportedFormat": 12336, "defaultFormat": 16, "maxChannels": 2, "defaultRate": 44100, "maxRate": 44100, "minRate": 41000, "maxLatency": 410, "minLatency": 128 } ], "audioInputDevices": [ { "name": "", "groupId": "", "vendor": "", "type": 1, "state": 2, "preferred": 15, "supportedFormat": 12336, "defaultFormat": 16, "maxChannels": 1, "defaultRate": 44100, "maxRate": 44100, "minRate": 41000, "maxLatency": 410, "minLatency": 128 } ] }, "javaScript": { "incrementalGCEnabled": true }, "accessibility": { "isActive": false, "forceDisabled": 0, "handlerUsed": false, "instantiator": "" }, "libraryVersions": { "NSPR": { "minVersion": "4.21", "version": "4.21" }, "NSS": { "minVersion": "3.44 Beta", "version": "3.44 Beta" }, "NSSUTIL": { "minVersion": "3.44 Beta", "version": "3.44 Beta" }, "NSSSSL": { "minVersion": "3.44 Beta", "version": "3.44 Beta" }, "NSSSMIME": { "minVersion": "3.44 Beta", "version": "3.44 Beta" } }, "userJS": { "exists": false }, "intl": { "localeService": { "requested": [ "ko-KR" ], "available": [ "an", "ar", "ast", "az", "be", "bg", "bn", "br", "bs", "ca", "cak", "cs", "cy", "da", "de", "dsb", "el", "en-CA", "en-GB", "en-US", "eo", "es-AR", "es-CL", "es-ES", "es-MX", "et", "eu", "fa", "ff", "fi", "fr", "fy-NL", "ga-IE", "gd", "gl", "gn", "gu-IN", "he", "hi-IN", "hr", "hsb", "hu", "hy-AM", "id", "is", "it", "ja", "ka", "kab", "kk", "kn", "ko", "lij", "lo", "lt", "lv", "ml", "mr", "ms", "my", "nb-NO", "ne-NP", "nl", "nn-NO", "oc", "pa-IN", "pl", "pt-BR", "pt-PT", "rm", "ro", "ru", "sk", "sl", "son", "sq", "sr", "sv-SE", "ta", "te", "th", "tr", "trs", "uk", "ur", "uz", "vi", "wo", "xh", "zam", "zh-CN", "zh-TW" ], "supported": [ "ko", "en-US" ], "regionalPrefs": [ "ko-KR" ], "defaultLocale": "en-US" }, "osPrefs": { "systemLocales": [ "ko-KR" ], "regionalPrefsLocales": [ "ko-KR" ] } }, "crashes": { "submitted": [], "pending": 0 }, "graphics": { "numTotalWindows": 1, "numAcceleratedWindows": 1, "windowLayerManagerType": "OpenGL", "windowLayerManagerRemote": true, "windowUsingAdvancedLayers": false, "adapterDescription": "Model: Pixel 3, Product: blueline, Manufacturer: Google, Hardware: blueline, OpenGL: Qualcomm -- Adreno (TM) 630 -- OpenGL ES 3.2 V@313.0 (GIT@3f88ca2, I42f6fe38fb) (Date:07/13/18)", "adapterVendorID": "Qualcomm", "adapterDeviceID": "Adreno (TM) 630", "adapterRAM": "", "adapterDrivers": "", "driverVendor": "", "driverVersion": "OpenGL ES 3.2 V@313.0 (GIT@3f88ca2, I42f6fe38fb) (Date:07/13/18)", "driverDate": "", "usesTiling": true, "contentUsesTiling": true, "offMainThreadPaintEnabled": true, "offMainThreadPaintWorkerCount": 4, "targetFrameRate": 60, "webgl1Renderer": "Qualcomm -- Adreno (TM) 630", "webgl1Version": "OpenGL ES 3.2 V@313.0 (GIT@3f88ca2, I42f6fe38fb) (Date:07/13/18)", "webgl1DriverExtensions": "GL_OES_EGL_image GL_OES_EGL_image_external GL_OES_EGL_sync GL_OES_vertex_half_float GL_OES_framebuffer_object GL_OES_rgb8_rgba8 GL_OES_compressed_ETC1_RGB8_texture GL_AMD_compressed_ATC_texture GL_KHR_texture_compression_astc_ldr GL_KHR_texture_compression_astc_hdr GL_OES_texture_compression_astc GL_OES_texture_npot GL_EXT_texture_filter_anisotropic GL_EXT_texture_format_BGRA8888 GL_OES_texture_3D GL_EXT_color_buffer_float GL_EXT_color_buffer_half_float GL_QCOM_alpha_test GL_OES_depth24 GL_OES_packed_depth_stencil GL_OES_depth_texture GL_OES_depth_texture_cube_map GL_EXT_sRGB GL_OES_texture_float GL_OES_texture_float_linear GL_OES_texture_half_float GL_OES_texture_half_float_linear GL_EXT_texture_type_2_10_10_10_REV GL_EXT_texture_sRGB_decode GL_EXT_texture_format_sRGB_override GL_OES_element_index_uint GL_EXT_copy_image GL_EXT_geometry_shader GL_EXT_tessellation_shader GL_OES_texture_stencil8 GL_EXT_shader_io_blocks GL_OES_shader_image_atomic GL_OES_sample_variables GL_EXT_texture_border_clamp GL_EXT_multisampled_render_to_texture GL_EXT_multisampled_render_to_texture2 GL_OES_shader_multisample_interpolation GL_EXT_texture_cube_map_array GL_EXT_draw_buffers_indexed GL_EXT_gpu_shader5 GL_EXT_robustness GL_EXT_texture_buffer GL_EXT_shader_framebuffer_fetch GL_ARM_shader_framebuffer_fetch_depth_stencil GL_OES_texture_storage_multisample_2d_array GL_OES_sample_shading GL_OES_get_program_binary GL_EXT_debug_label GL_KHR_blend_equation_advanced GL_KHR_blend_equation_advanced_coherent GL_QCOM_tiled_rendering GL_ANDROID_extension_pack_es31a GL_EXT_primitive_bounding_box GL_OES_standard_derivatives GL_OES_vertex_array_object GL_EXT_disjoint_timer_query GL_KHR_debug GL_EXT_YUV_target GL_EXT_sRGB_write_control GL_EXT_texture_norm16 GL_EXT_discard_framebuffer GL_OES_surfaceless_context GL_OVR_multiview GL_OVR_multiview2 GL_EXT_texture_sRGB_R8 GL_KHR_no_error GL_EXT_debug_marker GL_OES_EGL_image_external_essl3 GL_OVR_multiview_multisampled_render_to_texture GL_EXT_buffer_storage GL_EXT_external_buffer GL_EXT_blit_framebuffer_params GL_EXT_clip_cull_distance GL_EXT_protected_textures GL_EXT_shader_non_constant_global_initializers GL_QCOM_texture_foveated GL_QCOM_shader_framebuffer_fetch_noncoherent GL_EXT_memory_object GL_EXT_memory_object_fd GL_EXT_EGL_image_array GL_NV_shader_noperspective_interpolation GL_KHR_robust_buffer_access_behavior GL_EXT_EGL_image_storage GL_EXT_clip_control ", "webgl1Extensions": "ANGLE_instanced_arrays EXT_blend_minmax EXT_color_buffer_half_float EXT_disjoint_timer_query EXT_sRGB EXT_texture_filter_anisotropic OES_element_index_uint OES_standard_derivatives OES_texture_float OES_texture_float_linear OES_texture_half_float OES_texture_half_float_linear OES_vertex_array_object WEBGL_color_buffer_float WEBGL_compressed_texture_astc WEBGL_compressed_texture_etc WEBGL_compressed_texture_etc1 WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_depth_texture WEBGL_lose_context", "webgl1WSIInfo": "EGL_VENDOR: Android\nEGL_VERSION: 1.4 Android META-EGL\nEGL_EXTENSIONS: EGL_KHR_get_all_proc_addresses EGL_ANDROID_presentation_time EGL_KHR_swap_buffers_with_damage EGL_ANDROID_get_native_client_buffer EGL_ANDROID_front_buffer_auto_refresh EGL_ANDROID_get_frame_timestamps EGL_EXT_surface_SMPTE2086_metadata EGL_EXT_surface_CTA861_3_metadata EGL_EXT_gl_colorspace_scrgb EGL_EXT_gl_colorspace_scrgb_linear EGL_EXT_gl_colorspace_display_p3_linear EGL_EXT_gl_colorspace_display_p3 EGL_EXT_gl_colorspace_bt2020_linear EGL_EXT_gl_colorspace_bt2020_pq EGL_KHR_image EGL_KHR_image_base EGL_EXT_image_gl_colorspace EGL_KHR_lock_surface EGL_KHR_gl_colorspace EGL_KHR_gl_texture_2D_image EGL_KHR_gl_texture_3D_image EGL_KHR_gl_texture_cubemap_image EGL_KHR_gl_renderbuffer_image EGL_KHR_reusable_sync EGL_KHR_fence_sync EGL_KHR_create_context EGL_KHR_surfaceless_context EGL_EXT_create_context_robustness EGL_ANDROID_image_native_buffer EGL_KHR_wait_sync EGL_ANDROID_recordable EGL_KHR_partial_update EGL_EXT_pixel_format_float EGL_KHR_create_context_no_error EGL_KHR_mutable_render_buffer EGL_EXT_yuv_surface EGL_EXT_protected_content EGL_IMG_context_priority EGL_KHR_no_config_context ", "webgl2Renderer": "Qualcomm -- Adreno (TM) 630", "webgl2Version": "OpenGL ES 3.2 V@313.0 (GIT@3f88ca2, I42f6fe38fb) (Date:07/13/18)", "webgl2DriverExtensions": "GL_OES_EGL_image GL_OES_EGL_image_external GL_OES_EGL_sync GL_OES_vertex_half_float GL_OES_framebuffer_object GL_OES_rgb8_rgba8 GL_OES_compressed_ETC1_RGB8_texture GL_AMD_compressed_ATC_texture GL_KHR_texture_compression_astc_ldr GL_KHR_texture_compression_astc_hdr GL_OES_texture_compression_astc GL_OES_texture_npot GL_EXT_texture_filter_anisotropic GL_EXT_texture_format_BGRA8888 GL_OES_texture_3D GL_EXT_color_buffer_float GL_EXT_color_buffer_half_float GL_QCOM_alpha_test GL_OES_depth24 GL_OES_packed_depth_stencil GL_OES_depth_texture GL_OES_depth_texture_cube_map GL_EXT_sRGB GL_OES_texture_float GL_OES_texture_float_linear GL_OES_texture_half_float GL_OES_texture_half_float_linear GL_EXT_texture_type_2_10_10_10_REV GL_EXT_texture_sRGB_decode GL_EXT_texture_format_sRGB_override GL_OES_element_index_uint GL_EXT_copy_image GL_EXT_geometry_shader GL_EXT_tessellation_shader GL_OES_texture_stencil8 GL_EXT_shader_io_blocks GL_OES_shader_image_atomic GL_OES_sample_variables GL_EXT_texture_border_clamp GL_EXT_multisampled_render_to_texture GL_EXT_multisampled_render_to_texture2 GL_OES_shader_multisample_interpolation GL_EXT_texture_cube_map_array GL_EXT_draw_buffers_indexed GL_EXT_gpu_shader5 GL_EXT_robustness GL_EXT_texture_buffer GL_EXT_shader_framebuffer_fetch GL_ARM_shader_framebuffer_fetch_depth_stencil GL_OES_texture_storage_multisample_2d_array GL_OES_sample_shading GL_OES_get_program_binary GL_EXT_debug_label GL_KHR_blend_equation_advanced GL_KHR_blend_equation_advanced_coherent GL_QCOM_tiled_rendering GL_ANDROID_extension_pack_es31a GL_EXT_primitive_bounding_box GL_OES_standard_derivatives GL_OES_vertex_array_object GL_EXT_disjoint_timer_query GL_KHR_debug GL_EXT_YUV_target GL_EXT_sRGB_write_control GL_EXT_texture_norm16 GL_EXT_discard_framebuffer GL_OES_surfaceless_context GL_OVR_multiview GL_OVR_multiview2 GL_EXT_texture_sRGB_R8 GL_KHR_no_error GL_EXT_debug_marker GL_OES_EGL_image_external_essl3 GL_OVR_multiview_multisampled_render_to_texture GL_EXT_buffer_storage GL_EXT_external_buffer GL_EXT_blit_framebuffer_params GL_EXT_clip_cull_distance GL_EXT_protected_textures GL_EXT_shader_non_constant_global_initializers GL_QCOM_texture_foveated GL_QCOM_shader_framebuffer_fetch_noncoherent GL_EXT_memory_object GL_EXT_memory_object_fd GL_EXT_EGL_image_array GL_NV_shader_noperspective_interpolation GL_KHR_robust_buffer_access_behavior GL_EXT_EGL_image_storage GL_EXT_clip_control ", "webgl2Extensions": "EXT_color_buffer_float EXT_disjoint_timer_query EXT_texture_filter_anisotropic OES_texture_float_linear WEBGL_compressed_texture_astc WEBGL_compressed_texture_etc WEBGL_compressed_texture_etc1 WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_lose_context", "webgl2WSIInfo": "EGL_VENDOR: Android\nEGL_VERSION: 1.4 Android META-EGL\nEGL_EXTENSIONS: EGL_KHR_get_all_proc_addresses EGL_ANDROID_presentation_time EGL_KHR_swap_buffers_with_damage EGL_ANDROID_get_native_client_buffer EGL_ANDROID_front_buffer_auto_refresh EGL_ANDROID_get_frame_timestamps EGL_EXT_surface_SMPTE2086_metadata EGL_EXT_surface_CTA861_3_metadata EGL_EXT_gl_colorspace_scrgb EGL_EXT_gl_colorspace_scrgb_linear EGL_EXT_gl_colorspace_display_p3_linear EGL_EXT_gl_colorspace_display_p3 EGL_EXT_gl_colorspace_bt2020_linear EGL_EXT_gl_colorspace_bt2020_pq EGL_KHR_image EGL_KHR_image_base EGL_EXT_image_gl_colorspace EGL_KHR_lock_surface EGL_KHR_gl_colorspace EGL_KHR_gl_texture_2D_image EGL_KHR_gl_texture_3D_image EGL_KHR_gl_texture_cubemap_image EGL_KHR_gl_renderbuffer_image EGL_KHR_reusable_sync EGL_KHR_fence_sync EGL_KHR_create_context EGL_KHR_surfaceless_context EGL_EXT_create_context_robustness EGL_ANDROID_image_native_buffer EGL_KHR_wait_sync EGL_ANDROID_recordable EGL_KHR_partial_update EGL_EXT_pixel_format_float EGL_KHR_create_context_no_error EGL_KHR_mutable_render_buffer EGL_EXT_yuv_surface EGL_EXT_protected_content EGL_IMG_context_priority EGL_KHR_no_config_context ", "info": { "AzureCanvasBackend": "skia", "AzureFallbackCanvasBackend": "none", "AzureContentBackend": "skia", "ApzTouchInput": 1, "ApzAutoscrollInput": 1, "TileHeight": 512, "TileWidth": 512 }, "featureLog": { "features": [ { "name": "HW_COMPOSITING", "description": "Compositing", "status": "force_enabled", "log": [ { "type": "default", "status": "available" }, { "type": "user", "status": "force_enabled", "message": "Force-enabled by pref" } ] }, { "name": "OPENGL_COMPOSITING", "description": "OpenGL Compositing", "status": "force_enabled", "log": [ { "type": "default", "status": "available" }, { "type": "user", "status": "force_enabled", "message": "Force-enabled by pref" } ] }, { "name": "WEBRENDER", "description": "WebRender", "status": "unavailable", "log": [ { "type": "default", "status": "opt-in", "message": "WebRender is an opt-in feature" }, { "type": "user", "status": "available", "message": "Force enabled by pref" }, { "type": "runtime", "status": "unavailable", "message": "WebRender not ready for use on non-e10s Android" } ] }, { "name": "WEBRENDER_QUALIFIED", "description": "WebRender qualified", "status": "blocked", "log": [ { "type": "default", "status": "available" }, { "type": "env", "status": "blocked", "message": "Unsupported vendor" } ] }, { "name": "OMTP", "description": "Off Main Thread Painting", "status": "available", "log": [ { "type": "default", "status": "disabled", "message": "Disabled by default" }, { "type": "user", "status": "available", "message": "Enabled via layers.omtp.enabled" } ] } ], "fallbacks": [] }, "crashGuards": [] }, "extensions": [ { "name": "uBlock Origin", "version": "1.18.17.105", "isActive": true, "id": "uBlock0@raymondhill.net" }, { "name": "Useragent Changer to FF iOS on Google", "version": "1.0.2.2", "isActive": true, "id": "{44003fcf-f9f5-4418-a541-209174b096cb}" }, { "name": "Video Background Play Fix", "version": "1.4.3", "isActive": true, "id": "video-bg-play@timdream.org" } ], "features": [ { "name": "Web Compat", "version": "4.2.0", "id": "webcompat@mozilla.org" }, { "name": "WebCompat Reporter", "version": "1.1.0", "id": "webcompat-reporter@mozilla.org" } ] }

cipriansv commented 5 years ago

Thanks for the report, I was indeed able to reproduce the issue. The page is zoomed in after rotating from landscape to portrait mode. I am not able to zoom out to restore the page.

Tested with: Browser / Version: Firefox Nightly Mobile 68.0a1 (2019-05-08), Chrome 73.0.3683.90 Operating System: Huawei P10 (Android 8.0) - 1080 x 1920 pixels (~432 ppi pixel density)

This is the web page displayed in Firefox Nightly after switching from landscape to portrait mode:

And this is the web page displayed in Chrome:

wisniewskit commented 5 years ago

This seems to simply be a different in how Firefox and Chrome behave when this meta-viewport setup is used:

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0, width=device-width">

The maximum-scale=5.0 seems to be what "allows" Firefox to display a zoomed-in version after chanigng from landscape to portrait, which doesn't happen in Chrome.

And the user-scalable=no prevents the user from zooming back out.

This is being tracked in bz1523844, so I'm closing this as a duplicate of that issue.

lock[bot] commented 5 years ago

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.

webcompat / web-bugs

namu.wiki - Page does not fit the screen after switch from landscape to portrait mode #30732