Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Dropdown/Modal] Text and elements shift a little when moused over in Chrome #6342

Open
dk1m opened this issue Apr 18, 2018 · 2 comments
Open

Comments

@dk1m
Copy link

dk1m commented Apr 18, 2018

Steps

  1. It may be helpful to watch this video first to understand what I'm trying to get at: https://cl.ly/3G2F1D1F0A3d
  2. Using Chrome 66.0.3359.117, visit https://jsfiddle.net/qggrwns9/. You may need to adjust the width of your browser around to trigger the problem.
  3. Mouse over Shopping and slowly mouse over the elements inside the Clothing dropdown. Notice that the text slightly shifts.
  4. Click "Show Modal" button and slowly mouse over the Download button. Notice that the button shifts. If you look carefully, you'll see that the icon shifts when the modal first appears.
  5. Click "Show Dropdown" and slowly mouse over the items in the list. Notice that the text slightly shifts.

Expected Result

Text and elements should not shift when hovered over

Actual Result

Text, and even whole elements (rarer than the text), shift a little when moused over in Chrome in certain situations. I've checked Firefox and Safari, and I don't see this behavior in those browsers. From my investigation, it seems related to text/elements inside an animated overlay. Text and elements that are just rendered into the normal page don't exhibit this problem.

I have noticed that the size of the browser can affect this problem. At certain sizes, some of the problems don't occur. Might this have something to do with sub-pixel rendering? I've not encountered this kind of problem before, so it's hard for me to know where to start.

Version

Semantic UI 2.3.1
Chrome 66.0.3359.117
macOS 10.13.3

Testcase

https://cl.ly/3G2F1D1F0A3d
https://jsfiddle.net/qggrwns9/

@dk1m dk1m changed the title Text and elements inside dropdowns/popups/modals shift a little when moused over in Chrome [Dropdown/Modal] Text and elements inside dropdowns/modals shift a little when moused over in Chrome Apr 18, 2018
@dk1m dk1m changed the title [Dropdown/Modal] Text and elements inside dropdowns/modals shift a little when moused over in Chrome [Dropdown/Modal] Text and elements shift a little when moused over in Chrome Apr 18, 2018
@y0hami
Copy link
Member

y0hami commented Apr 19, 2018

I can replicate the dropdown items but not the download button, this will require some further investigation.

@dk1m
Copy link
Author

dk1m commented Apr 19, 2018

Yeah, the download button is definitely trickier to repro than the dropdown items. I'm not sure if it will work reliably for others, but when I resize my viewport to 1032px width (based on the display that comes up when resizing the dev tools), I can repro the download button problem reliably in the fiddle.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants