Wrong positioning of popover on IOS #3638

w01fgang · 2016-03-08T23:44:04Z

Problem Description

Popover doesn't seen on IOS when I type in Autocomplete field.

I guess I found why.

When I start to interact with other parts of application, the popover flies from top.
I found that div with popover has wrong position. For example: the text field has absolute offset position 916px and popover has top: 294px;.
I think that in IOS position:fixed has different behavior, positioning starts from top of the page, not of the screen.

Versions

Material-UI: v0.15.0-alpha.1 and latest from github
React: 0.14.7
Browser: Safari 8 / ios 8.2

The text was updated successfully, but these errors were encountered:

maxpechenin · 2016-03-09T09:30:14Z

I was facing this problem on one of my projects. http://stackoverflow.com/questions/7970389/ios-5-fixed-positioning-and-virtual-keyboard . Shortly: fixed elements scrolls in iOS browsers, then virtual keyboard is opened. Moreover, devs from Apple keep this behaviour at least in a 5 iOS versions in a row. So probably it's a feature and they aren't going to fix it. I can envestigate, how to solve this in popover, if you want.

w01fgang · 2016-03-09T09:36:47Z

To override this behavior I check if it's IOS and if true I get offset().top instead of anchor element bottom position.
I use jquery and device.js because deadline

getAnchorPosition(el) {
    if (!el) {
      el = ReactDOM.findDOMNode(this);
    }
    const rect = el.getBoundingClientRect();
    const a = {
      top: rect.top,
      left: rect.left,
      width: el.offsetWidth,
      height: el.offsetHeight,
    };
    const offsetTop = window.jQuery(el).offset().top;
    a.right = rect.right || a.left + a.width;
    a.bottom = (device.ios()?offsetTop + a.height:rect.bottom) || (device.ios()?offsetTop:a.top) + a.height;
    a.middle = a.left + ((a.right - a.left) / 2);
    a.center = a.top + ((a.bottom - a.top) / 2);
    return a;
  },

w01fgang · 2016-03-09T09:45:36Z

Sorry, missed by clicking on the button :)

maxpechenin · 2016-03-09T10:26:38Z

Seems like we can safely change this https://github.com/callemall/material-ui/blob/master/src/popover/popover.jsx#L203 to position: 'absolute' . Popover renders to layer, which has
this._layer.style.position = 'fixed'; this._layer.style.top = 0; this._layer.style.bottom = 0; this._layer.style.left = 0; this._layer.style.right = 0;
So basically where is no difference between fixed and absolute positioning for popover, except this issue. I will make a PR shortly. Another quesiton is, why it's in layer? Because of fixed positioning of the layer we have to handle page scroll and change popover top directly. On the other hand, if popover will has just position: absolute without layer - this issue and necessity to handle scroll will gone.

maxpechenin · 2016-03-09T11:13:40Z

I don't mention, that this will not solve this issue, because layer itself has position: fixed. So i'll close the PR. So the only way which I see is to not using layer for popover or to set the positioning of layer to absolute, when popover use it.

chrismcv · 2016-03-10T22:53:47Z

#3144 sorts this - we had the same issue - has become a little distracted...

antoinerousseau · 2016-04-11T21:57:27Z

Got the same issue without the virtual keyboard

nathanmarks · 2016-04-12T03:31:37Z

@newoga check this one out too RE Popover

w01fgang · 2016-06-08T18:07:41Z

Is there any progress? The documentation site on version 0.15.0 has the same issue.
React 15.1.0
IOS 9.3

nsantini · 2016-06-16T01:47:20Z

+1

@w01fgang I tested your solution and it works. The downside is that I would have to maintain a fork of material-ui and include jquery to make it work. Have you found a way to get the offset without jquery?

w01fgang · 2016-06-16T08:19:42Z

@nsantini yes I have the way.
First of all I use react-boilerplate and for that fix I only need to take Autocomplete and Popover components, so I don't need to make a fork.
Here's the folder structure:

components
containers
material-ui/
     Autocomplete
     Popever
tests
...

And here's the function for finding needed position:

getOffsetTop (elem) => {

    let yPos = elem.offsetTop;
    let tempEl = elem.offsetParent;

    while ( tempEl != null )
    {
        yPos += tempEl.offsetTop;
        tempEl = tempEl.offsetParent;
    }

    return yPos;
}

nsantini · 2016-06-16T09:45:48Z

@w01fgang legend!

antoinerousseau · 2016-06-23T19:58:13Z

could we make a PR with this code?

Taakn · 2016-07-13T15:54:36Z

I'm missing something but I can't get the fix to work. I tried using your Material UI branch @w01fgang but that didn't work either. Top position is still incorrect.

That's my autocomplete:

        <AutoComplete
          {...this.props}
          dataSource={this.state.dataSource.map((item, index) => {return item.label})}
          filter={(searchText: string, key: string) => true}
        />

Am I missing something ?

Thanks so much

w01fgang · 2016-07-13T18:39:33Z

@Taakn can you show the output of device detection helper?

import Device from 'material-ui/utils/device';
console.log(Device);

Taakn · 2016-07-13T21:41:59Z

@w01fgang Thanks for your reply. I'm actually getting Error: Cannot find module 'material-ui/utils/device' so something is wrong with my configuration.

My package.json looks like this, is that correct ? Otherwise what would be the best way to get your solution ?

"material-ui": "git+https://github.com/w01fgang/material-ui.git#fixPopoverIOS",

Thanks again

w01fgang · 2016-07-14T03:32:50Z

@Taakn When you install from git repo, it installs in folder 'material-ui-build'

"material-ui-build": "github:w01fgang/material-ui#fixPopoverIOS",

Otherwise it doesn't installs.
Than you need to import it from material-ui-build

import AutoComplete from 'material-ui-build/AutoComplete'

Taakn · 2016-07-14T09:48:53Z

Hi @w01fgang thanks for your help.

When doing an npm install I am getting an unmet peer dependency error (I am using react@15.2.1 and your package requires 0.16.0-alpha ?) but I'm not sure that would really matter.

However I am getting an Uncaught Error: Cannot find module 'material-ui-build/AutoComplete' error. When I attempt to just require('material-ui-build') my application doesn't start at all.

Do you know what could be the problem ? Please let me know if you can think of anything else.

Thanks again

w01fgang · 2016-07-17T08:50:29Z

@Taakn sorry, my mistake. Maybe I need to sleep more 😄
Using github's version isn't simple. In npm package the material-ui is transpiled by babel, but in the github it is not. For example in my webpack config babel ignores all from node_modules folder and simple importing from material-ui-build doesn't work.
I think you can copy Popover and Autocomplete components and make a little change to them

Taakn · 2016-07-18T23:48:11Z

Thanks @w01fgang it took a little bit of work but it's working. It's interesting but my desktop Safari is sending the iPhone user agent when I'm debugging. Anyway thanks again!

oliviertassinari · 2016-12-10T18:59:36Z

I was digging into that issue last weekend.
I realized that the root of the issue is the iOS browser messing around with fixed positioned elements when an input is focused.

It seems that the proposed fix (#4638) is only working fine in that context but breaking the others.

I believe that the only way to solve that issue is to expose a property to enable / disable the fixed positioning.
Any thoughts?

w01fgang · 2016-12-10T21:45:57Z

The problem is in the fixed positioning in IOS.
The getBoundingClientRect() method on IOS returns values different from the others.
I have made this fix more than a year ago and I successfully use it.
Maybe doing refactor on the PR #4638 I broke some thing, but I don't think so, it should work.

Edit:
I have made an update to the PR.

PhilippSpo · 2016-12-30T22:19:15Z

There still are some issues on mobile. It seems to be related to the scroll position:

oliviertassinari · 2016-12-30T22:21:56Z

There still are some issues on mobile. It seems to be related to the scroll position:

@PhilippSpo That's the expected behavior on an emulator. Please try it in an iPhone simulator / real device.

ghost · 2017-05-06T13:21:46Z

@PhilippSpo 's issue reproduced for me on a real device too
Tho I fixed it with

popoverProps: {
                style: {
                    position: 'absolute'
                }
            }

carlgunderson · 2017-05-24T23:03:22Z

I'm also experiencing this issue on iOS 10.3.1 in Safari and Chrome. It's happening on the documentation site like @PhilippSpo 's example, but the Popover is appearing so far down that it's off the screen of my iPhone 6 so I can't even see it. Something seems to have changed since #4638 was implemented.

devinivy · 2017-06-14T15:18:55Z

I am also experiencing this issue– it's specifically related to scroll on mobile screens. I see it occurring in my Chrome devices view.

devinivy · 2017-06-14T19:35:36Z

For what it's worth, this doesn't seem to happen when you use the down key to enter the popover menu. As far as I can tell it seems to be directly related to the focusTextField piece of state. When it's set to false things seem to work. I tested this by setting it to false in handleChange(), and while I was not able to continue typing in the textfield, the popover did appear in the right place.

I wonder if it has something to do with the timing of setting the anchorEl when focus changes.

Edit: no progress, but I feel more sure it's related to the text field having focus.

devinivy · 2017-06-15T14:07:29Z

More info!

I am able to correct the issue on actual devices when the components live in a scrolling body. Originally they were in a scrolling div. Once they live as part of the scrolling body the bug appears in the Chrome devices tab but not in the iOS simulator, which is good enough for now!

TLDR when there's a focused text input in a scrolling container, and that container is scrolled, the autocomplete's popover appears where it would if the div were not scrolled.

davidascher · 2017-06-17T22:09:26Z

@devinivy are you saying you have a fix for this? if so, please share! ;-)

devinivy · 2017-06-18T15:37:52Z

My fix was to ensure the autocomplete field wasn't scrolled within a scrolling div. Instead I recreated the layout of my page to have a scrolling body. Originally the layout consisted of a full-height div that scrolled, which is what seems to have triggered the issue.

alicerocheman · 2017-06-22T14:35:39Z

@devinivy Geez, I cannot use your fix :/
Plus, on chrome device view, the dropdown seems to be fixed. No matter how scrolled down I am it appears in the same place, so I'm confused by your analysis... :(

oliviertassinari · 2017-07-04T18:12:46Z

Closes by #7333 but #5544 remains.

quorak · 2018-01-22T21:53:21Z

I think the core issue, is that older ios version dont support Element.getBoundingClientRect() which we are using here
https://github.com/mui-org/material-ui/blob/master/src/Popover/Popover.js#L264

see:
https://caniuse.com/#feat=getboundingclientrect
filamentgroup/fixed-fixed#4
lionheart/openradar-mirror#6233

nathanmarks added the bug 🐛 Something doesn't work label Mar 9, 2016

w01fgang closed this as completed Mar 9, 2016

w01fgang reopened this Mar 9, 2016

maxpechenin mentioned this issue Mar 9, 2016

[Popover] fix scrolling in iOS issue, when virtual keyboard is opened. #3640

Closed

3 tasks

w01fgang mentioned this issue Jul 6, 2016

[Popover] Fix bad positioning on IOS devices #4638

Merged

3 tasks

Taakn mentioned this issue Oct 11, 2016

[AutoComplete] not working properly on mobile browsers #4499

Closed

oliviertassinari added component: AutoComplete component: Popover The React component. labels Dec 10, 2016

oliviertassinari closed this as completed in #4638 Dec 15, 2016

Taakn mentioned this issue Apr 11, 2017

[Autocomplete] not working on some iPhones/versions of iOS #6558

Closed

oliviertassinari reopened this Jun 14, 2017

davidascher mentioned this issue Jun 17, 2017

Test tags with iOS participedia/frontend#481

Open

davidascher mentioned this issue Jun 18, 2017

Autocomplete not working on iOS TeamWertarbyte/material-ui-chip-input#122

Closed

oliviertassinari removed the Safari label Jun 23, 2017

oliviertassinari closed this as completed Jul 4, 2017

oliviertassinari added the component: autocomplete This is the name of the generic UI component, not the React module! label Apr 29, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Wrong positioning of popover on IOS #3638

Wrong positioning of popover on IOS #3638

w01fgang commented Mar 8, 2016

maxpechenin commented Mar 9, 2016

w01fgang commented Mar 9, 2016

w01fgang commented Mar 9, 2016

maxpechenin commented Mar 9, 2016

maxpechenin commented Mar 9, 2016

chrismcv commented Mar 10, 2016

antoinerousseau commented Apr 11, 2016

nathanmarks commented Apr 12, 2016

w01fgang commented Jun 8, 2016

nsantini commented Jun 16, 2016

w01fgang commented Jun 16, 2016

nsantini commented Jun 16, 2016

antoinerousseau commented Jun 23, 2016

Taakn commented Jul 13, 2016

w01fgang commented Jul 13, 2016

Taakn commented Jul 13, 2016

w01fgang commented Jul 14, 2016 •

edited

Loading

Taakn commented Jul 14, 2016

w01fgang commented Jul 17, 2016

Taakn commented Jul 18, 2016

oliviertassinari commented Dec 10, 2016 •

edited

Loading

w01fgang commented Dec 10, 2016 •

edited

Loading

PhilippSpo commented Dec 30, 2016

oliviertassinari commented Dec 30, 2016 •

edited

Loading

ghost commented May 6, 2017 •

edited by ghost

Loading

carlgunderson commented May 24, 2017

devinivy commented Jun 14, 2017

devinivy commented Jun 14, 2017 •

edited

Loading

devinivy commented Jun 15, 2017

davidascher commented Jun 17, 2017

devinivy commented Jun 18, 2017

alicerocheman commented Jun 22, 2017

oliviertassinari commented Jul 4, 2017

quorak commented Jan 22, 2018

Wrong positioning of popover on IOS #3638

Wrong positioning of popover on IOS #3638

Comments

w01fgang commented Mar 8, 2016

Problem Description

I guess I found why.

Versions

maxpechenin commented Mar 9, 2016

w01fgang commented Mar 9, 2016

w01fgang commented Mar 9, 2016

maxpechenin commented Mar 9, 2016

maxpechenin commented Mar 9, 2016

chrismcv commented Mar 10, 2016

antoinerousseau commented Apr 11, 2016

nathanmarks commented Apr 12, 2016

w01fgang commented Jun 8, 2016

nsantini commented Jun 16, 2016

w01fgang commented Jun 16, 2016

nsantini commented Jun 16, 2016

antoinerousseau commented Jun 23, 2016

Taakn commented Jul 13, 2016

w01fgang commented Jul 13, 2016

Taakn commented Jul 13, 2016

w01fgang commented Jul 14, 2016 • edited Loading

Taakn commented Jul 14, 2016

w01fgang commented Jul 17, 2016

Taakn commented Jul 18, 2016

oliviertassinari commented Dec 10, 2016 • edited Loading

w01fgang commented Dec 10, 2016 • edited Loading

PhilippSpo commented Dec 30, 2016

oliviertassinari commented Dec 30, 2016 • edited Loading

ghost commented May 6, 2017 • edited by ghost Loading

carlgunderson commented May 24, 2017

devinivy commented Jun 14, 2017

devinivy commented Jun 14, 2017 • edited Loading

devinivy commented Jun 15, 2017

davidascher commented Jun 17, 2017

devinivy commented Jun 18, 2017

alicerocheman commented Jun 22, 2017

oliviertassinari commented Jul 4, 2017

quorak commented Jan 22, 2018

w01fgang commented Jul 14, 2016 •

edited

Loading

oliviertassinari commented Dec 10, 2016 •

edited

Loading

w01fgang commented Dec 10, 2016 •

edited

Loading

oliviertassinari commented Dec 30, 2016 •

edited

Loading

ghost commented May 6, 2017 •

edited by ghost

Loading

devinivy commented Jun 14, 2017 •

edited

Loading