Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[IE11] display:table and table-cell makes popper unable to find correct positioning

See original GitHub issue

CodePen demo

https://codepen.io/Redmega/pen/WMPRGW

Steps to reproduce the problem

Use IE11
Have a series of elements in a set of nested divs with display:table and display:table-cell
Try to use one of the elements as a popper rel (or tooltip) (Not the top one or you can’t see the issue)

What is the expected behavior?

The tooltip should be displayed as normal (like on chrome): screen shot 2018-02-28 at 6 55 58 pm

What went wrong?

The tooltip cannot align itself to the top of the element properly. It goes all the way to the top of the viewport screen shot 2018-02-28 at 6 59 56 pm

Any other comments?

You can see the error persist through different dependencies here (Using react-datepicker): https://beautiful-crane.glitch.me/ Note how adding position relative to the wrapper div fixes the issue on IE11.

Issue Analytics

State:
Created 6 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

jasmine-qcommented, May 20, 2019

I’m using react-popper and came across this issue. What worked for me was to set positionFixed: true on the Popper component https://popper.js.org/popper-documentation.html#Popper.Defaults.positionFixed

0reactions

FezVrastacommented, Jan 2, 2020

May someone verify if this is still an issue with @popperjs/core@alpha?

Top Results From Across the Web

[IE11] display:table and table-cell makes popper unable to find ...

EDIT: I've added a wrapper div with relative positioning to the codepen example as well (pure tooltip implementation) and it also seems to...

Popper.js wrong initial position of dropdown/tooltip

I found that CSS position transform of popper is calculated wrong for my usage. But don't understand, why it is recalculated to right...

@mui/system | Yarn - Package Manager

CSS utilities for rapidly laying out custom designs. Installation. Install the package in your project directory with: // with npm npm install @mui/system...

material-ui/core/CHANGELOG.md - UNPKG

We will make the documentation of the v5 alpha releases available under ... 1576, - [Popper] Fix position when changing state or updated...

Untitled

Get all cuccos kakariko village 3ds, Cs first clubs, Psalm 139 verse 23 24, ... Web service communicationexception, Float left display table cell, ......