Import configureStore from './store/configureStore' Import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider' My index.jsx looks like this: import React from 'react' In case i tried to position the anchor through anchorPosition prop, calculating the left % is very difficult for all laptop resolutions.I built up a component with React and Material-UI. Tried both Menu and Popover components for the same, but it doesn’t work. It works as expected when the value is 100%, but once it is decreased or increased the position of popover is wrong. Just wanted to highlight how important this can be for that goal and it is one of our biggest initiatives at our company right now, so it’s a big Any update on this issue? When i set my browser zoom/display setting on my laptop to any value less than 100%, the position of popover is wrong. This really makes it hard for us to get to a mobile responsive experience if our toolset introduces new problems while replacing old UI. Considering the prevalence of menu use headers / mobile header experiences, it seems likely this will have high impact. Thus interacting with any menu will ultimately feel like the site is “broken” because they are panned away and dragging/zooming doesn’t work until you think to just “tap” somewhere to unknowingly close the open menu. However until the majority of the page is responsive, the mobile experience will be a zoomed out experience. We do not have the entire site mobile-responsive, but we get closer by introducing more material/react components to different pages. In terms of “impact” this has a huge impact in our ability to utilize material-ui menus in our transition to a mobile responsive website. OnePlus 6 (ONEPLUS A6003), but happens on all of the Android and iOS devices we had a chance to test Our local environment is a bit outdated (React v16.7 & material-ui v3.7.0) but the issue occurs even on the demo website, which leads us to believe that the issue is consistent even on the latest version. We believe that the issue is quite new and that the new Chrome mobile version might also have something to do with it. We made heavy usage of modals, popovers and dialogs, but the current issue prevents users from completing simple actions. Due to the nature of our project, mobile support has been minimal but users that wished to browse through mobile generally had no difficulties to pan/zoom in order to move around the page. We’ve been using material-ui for our project for quite some time and are very pleased by it. Including video of the interaction described in the steps below: ĭetect the “Simple Popover” demo section, slightly zoom in (device pinch) so that the “Open Popover” button is still visible.Īt this point, the popover is open but the page already scrolled itself up The issue can be reproduced on the material-ui popover component demo website: Expected Behavior □Įxpected the popover to open and for the page to stay in the same scroll position regardless of the current zoom level in order for the popover content to be visible, also expected to be able to at least drag the viewport in order to reach the relevant popover after the jump (solved it by overriding the touch-action: none css for the backdrop, but was confused by its default value) Steps to Reproduce □ The issue only happens on the actual mobile device, using the desktop Chrome Devtools to emulate the issue was unsuccessful. We have also tested all the combinations of disableAutoFocus, disableEnforceFocus and disableRestoreFocus for the root modal props, but to no effect. The issue does not happen on the root component (Modal) which leads us to believe that this may be an issue with the calculation of the anchor position, but we’re not 100% sure. On mobile Chrome, while the page is slightly zoomed, opening the popover will cause it to open but will also cause the page to scroll itself up into a position in which the popover can no longer be visible.Īlso, while being in that position, the scrolling/zooming of the page is disabled and the only interaction allowed is to tap the invisible backdrop in order for the popover to close. * There’s an open issue related to IconMenu for iOS devices, but this is not the same component, and also no longer exclusive to iOS devices but happens on Android also. * I have searched the issues of this repository and believe that this is not a duplicate.The issue is present in the latest release.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |