Modal Dimmer Blur Bug

[philr35]

Steps to Reproduce
Have a header, button or similar on a page with the styling properties set for "top", "margin", "position" will cause a bug with the dimmer blurring effect on modal. If you take off the styling then the problem goes away! Very strange

Expected
Expect modal to blurr everything in background instantly.

Result
When modal is brought up, the text/button will not blurr fully for 1 second. However, on my own personal application the blurr will not blurr these elements at all. I was unable to recreate my exact bug, but I recreated the 1second fail to blurr bug.

Version
0.71.3

Testcase
Here is the codepen showcasing the issue: https://codepen.io/philliprognerud/pen/brxpBo

[levithomason]

Hi @patrickgaskill, this is strange indeed. It seems to be strictly limited to how Chrome deals with CSS filter transitions for position: relative; elements in this case. The other properties don't seem to affect the rendering (at least on the latest Chrome and my MacBook).

Since our project doesn't deal with CSS, only React components, please post this over at https://github.com/Semantic-Org/Semantic-UI.

[philr35]

@levithomason I was going to post this issue on the other repo, however, the issue seems to have gone away? However, I am using a chromebook now, and the blurr works perfectly. Can you confirm that it is not working for you still, then maybe it's a problem from a specific version of chrome?

Chrome version: Version 60.0.3112.80 (Official Build) (64-bit)

[levithomason]

Confirmed.

Chrome Version 60.0.3112.113 (Official Build) (64-bit)
MacOS Sierra 10.12.5 (16F73)
MacBook Pro (Retina, 15-inch, Mid 2015)

[philr35]

@levithomason Upon further development of my application I figured out how this bug works, and I'll post to the main repo afterwards.

Basically, there's two ways to make the bug go away:

1. If the browser is not snapped into fullscreen the bug goes away. Once fullscreen the bug is now present.
   Test Case Example: http://recordit.co/MslTcABfyp

2. The way I fixed it in my personal application is by applying a padding: 1px to the document body with a 300ms delay... I know very strange but If I do a shorter delay it wont fix the bug. I did this snippet of code in my componentDidMount(), and it fixes it

Example:

   setTimeout(() => {
      document.body.style.paddingBottom = "1px";
    }, 300);

Anyways, I'll probably post this to the main repo sometime soon.