You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
It may be helpful to watch this video first to understand what I'm trying to get at: https://cl.ly/3G2F1D1F0A3d
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.
Mouse over Shopping and slowly mouse over the elements inside the Clothing dropdown. Notice that the text slightly shifts.
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.
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.
The text was updated successfully, but these errors were encountered:
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
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
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.
Steps
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/
The text was updated successfully, but these errors were encountered: