Home Microsoft Edge not immediately redrawing element after class change
Reply: 0

Microsoft Edge not immediately redrawing element after class change

mjoyce91
1#
mjoyce91 Published in 2017-12-07 22:35:07Z

On my React site, I have a profile/account dropdown (similar to Github's, where you click on your profile picture and a dropdown appears). On most browsers, it works correctly. When the div is clicked, it applies the dropdown--active class to itself. This dropdown--active class contains a rule for the child element, dropdown__content, to change its display from none to block, thereby toggling the display of the dropdown content on click.

Before click:

<div class="dropdown account-dropdown">
  <a href="/#" class="dropdown__trigger ">
    <span class="account-dropdown--name">admin</span>
  </a>
  <div class="dropdown__content">
    <div class="account-dropdown--identity account-dropdown--segment">
      Signed in as admin
    </div>
  </div>
</div>

After click:

<div class="dropdown dropdown--active account-dropdown">
  <a href="/#" class="dropdown__trigger ">
    <span class="account-dropdown--name">admin</span>
  </a>
  <div class="dropdown__content">
    <div class="account-dropdown--identity account-dropdown--segment">
      Signed in as admin
    </div>
  </div>
</div>

However, the only way I can get it to display in Microsoft Edge is to click some where else on the screen after I've already clicked the parent element. With Inspect Element open, I can tell that the class is in fact being applied immediately after click, but the child element is not redrawn/reevaluated until some where else on the screen is clicked. Alternatively, tabbing to the element and clicking "enter" does not cause this problem.

Works in Chrome, IE 11, Firefox fine though.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.258086 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO