Chrome Update 73: How to Fix Materialize CSS 0.100.2 Date/Time Pickers & Dropdowns Flickering/Disappearing Issue

Table of Contents#

1. Understanding the Issue
   • Symptoms of the Problem
   • When Does It Occur?
2. Root Cause Analysis
   • Chrome 73’s Rendering Changes
   • Materialize 0.100.2’s Vulnerabilities
3. Fixing Date/Time Pickers
   • Issue 1: Flickering or Invisible Picker
   • Issue 2: Picker Closes Prematurely
4. Fixing Dropdowns
   • Issue 1: Dropdown Disappears on Click
   • Issue 2: Dropdown Fails to Open/Close Consistently
5. Testing the Fixes
6. Alternative Solutions
7. Conclusion
8. References

Understanding the Issue#

Symptoms of the Problem#

• Date/Time Pickers: When clicking an input field, the picker modal flickers (flashes on/off), fails to render entirely, or closes immediately when interacting with it (e.g., selecting a date).
• Dropdowns: When clicking a dropdown trigger, the dropdown menu appears briefly but closes when hovering or clicking inside it. In some cases, it may not open at all.

When Does It Occur?#

The issues are Chrome 73+ specific and affect Materialize 0.100.2 (and possibly older versions). They persist across devices (desktop/mobile) and are most noticeable in:

• Date pickers initialized with $('.datepicker').datepicker();
• Time pickers initialized with $('.timepicker').timepicker();
• Dropdowns initialized with $('.dropdown-trigger').dropdown();

Root Cause Analysis#

Chrome 73’s Rendering Changes#

Chrome 73 introduced stricter rules for CSS stacking contexts and event propagation:

• Stacking Contexts: Chrome now more aggressively clamps z-index values for elements, especially those with position: fixed or transform properties. This broke Materialize’s reliance on high z-index values to render modals/dropdowns above other content.
• Event Handling: Chrome 73 adjusted how mousedown, mouseup, and click events propagate. Materialize’s dropdowns and pickers use custom event listeners (e.g., to close when clicking outside) that now conflict with Chrome’s updated event flow.

Materialize 0.100.2’s Vulnerabilities#

Materialize 0.100.2 (released in 2018) has outdated code that assumes:

• Unrestricted z-index values (e.g., z-index: 1000 for modals).
• Event listeners that rely on deprecated behavior (e.g., using mousedown to trigger dropdowns without preventing default actions).

Fixing Date/Time Pickers#

Materialize date/time pickers are rendered as modals (position: fixed) with a semi-transparent backdrop. Chrome 73’s stacking context changes often push these modals behind other content or cause flickering during rendering.

Issue 1: Flickering or Invisible Picker#

Problem: The picker modal flashes or fails to appear because it’s not promoted to a top-level stacking context.

Fix: Force the Picker to Its Own Render Layer
Promote the picker modal to its own GPU layer using transform: translateZ(0), which ensures Chrome renders it independently.

Add this custom CSS after Materialize’s core CSS:

/* Fix date picker flickering in Chrome 73+ */
.datepicker-modal, .timepicker-modal {
  z-index: 1003 !important; /* Higher than Materialize's default (1002) */
  transform: translateZ(0); /* Promote to own layer */
  backface-visibility: hidden; /* Prevent flicker during transitions */
}
 
/* Fix backdrop z-index (should be behind the picker) */
.datepicker-modal ~ .backdrop, .timepicker-modal ~ .backdrop {
  z-index: 1002 !important;
}

Why It Works:

• z-index: 1003 !important ensures the picker sits above other content (Materialize’s backdrop uses z-index: 1002 by default).
• transform: translateZ(0) triggers Chrome’s layer promotion, preventing reflow/repaint conflicts that cause flickering.

Issue 2: Picker Closes Prematurely#

Problem: The picker closes when clicking inside (e.g., selecting a date) due to misfired "outside click" events.

Fix: Modify Materialize’s Close-on-Click Logic
Materialize’s pickers close when clicking outside the modal. In Chrome 73+, this logic fires incorrectly when clicking inside. Override the onClose callback to prevent premature closure:

Initialize the date/time picker with these options:

document.addEventListener('DOMContentLoaded', function() {
  // Fix date picker closing prematurely
  $('.datepicker').datepicker({
    onOpen: function() {
      // Prevent outside click from closing the picker immediately
      document.querySelector('.datepicker-modal').addEventListener('click', function(e) {
        e.stopPropagation(); // Stop event from bubbling to the document
      });
    },
    onClose: function() {
      // Clean up the event listener to avoid memory leaks
      document.querySelector('.datepicker-modal')?.removeEventListener('click', () => {});
    }
  });
 
  // Repeat for time picker
  $('.timepicker').timepicker({
    onOpen: function() {
      document.querySelector('.timepicker-modal').addEventListener('click', function(e) {
        e.stopPropagation();
      });
    },
    onClose: function() {
      document.querySelector('.timepicker-modal')?.removeEventListener('click', () => {});
    }
  });
});

Why It Works:

• e.stopPropagation() prevents the "click inside" event from reaching the document-level listener that Materialize uses to close the picker.

Fixing Dropdowns#

Materialize dropdowns use position: absolute and custom event listeners to open/close. Chrome 73’s event propagation changes cause them to close unexpectedly.

Issue 1: Dropdown Disappears on Click#

Problem: The dropdown closes when clicking inside it because Chrome 73 triggers a click event that Materialize interprets as an "outside click."

Fix: Override Dropdown Close Logic
Modify the dropdown initialization to disable closeOnClick ( Materialize’s default behavior) and manually handle closure.

Update your dropdown initialization code:

document.addEventListener('DOMContentLoaded', function() {
  $('.dropdown-trigger').dropdown({
    closeOnClick: false, // Disable auto-close when clicking inside
    hover: false // Optional: if using click-triggered dropdowns (not hover)
  });
 
  // Manually close dropdown when clicking outside
  document.addEventListener('click', function(e) {
    const dropdowns = document.querySelectorAll('.dropdown-content.active');
    dropdowns.forEach(dropdown => {
      // Check if the click is outside the dropdown and its trigger
      const trigger = dropdown.previousElementSibling; // Dropdown trigger element
      if (!dropdown.contains(e.target) && !trigger.contains(e.target)) {
        $(dropdown).closest('.dropdown-trigger').dropdown('close');
      }
    });
  });
});

Why It Works:

• closeOnClick: false prevents the dropdown from closing when clicking inside.
• The global click listener manually closes the dropdown only when clicking outside the dropdown or its trigger.

Issue 2: Dropdown Fails to Open/Close Consistently#

Problem: The dropdown doesn’t open on first click or closes on hover due to z-index or positioning issues.

Fix: Adjust Dropdown CSS
Ensure the dropdown content has a high enough z-index and correct positioning. Add this custom CSS:

/* Fix dropdown z-index and positioning in Chrome 73+ */
.dropdown-content {
  z-index: 1001 !important; /* Higher than surrounding content */
  position: absolute !important; /* Override any conflicting position: fixed */
  opacity: 1 !important; /* Force opacity to 1 to prevent invisible dropdowns */
  transform: translateZ(0); /* Promote to own layer */
}

Why It Works:

• z-index: 1001 ensures the dropdown appears above other elements.
• position: absolute (Materialize’s default) is enforced to avoid conflicts with parent position: relative containers.

Testing the Fixes#

After applying the above changes, test thoroughly to ensure the issues are resolved:

1. Clear Cache: Chrome may cache old CSS/JS. Hard-refresh with Ctrl+Shift+R (Windows/Linux) or Cmd+Shift+R (Mac).
2. Incognito Mode: Test in incognito to rule out extension conflicts.
3. Interactions:
   • Date/Time Pickers: Open, select a date/time, and verify no flickering/closing.
   • Dropdowns: Open, click inside/outside, and confirm it only closes on outside clicks.

Alternative Solutions#

If the fixes above don’t work, consider these alternatives:

Update Materialize (Best Long-Term Fix)#

Materialize 1.0.0+ (released in 2019) addresses Chrome 73+ compatibility. If your project allows, update to the latest version:

# Via npm
npm install materialize-css@latest
 
# Via CDN
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Use a Different Library#

If updating Materialize isn’t feasible, replace problematic components with alternatives:

• Date/Time Pickers: Flatpickr or Pikaday.
• Dropdowns: Popper.js (used by Bootstrap) or Tippy.js.

Conclusion#

Chrome 73+ broke Materialize 0.100.2 date/time pickers and dropdowns due to changes in stacking contexts and event handling. By:

• Adjusting z-index values and promoting elements to their own render layers (CSS fixes),
• Modifying event listeners to prevent premature closure (JS fixes),
• Testing thoroughly,

you can restore full functionality. For long-term stability, consider updating Materialize to 1.0.0+ or switching to a more modern library.

References#

• Chrome 73 Release Notes
• Materialize CSS 0.100.2 Documentation
• Materialize 1.0.0+ Documentation
• Stack Overflow: Materialize Dropdown Closes on Click
• GitHub: Materialize Issue #6096 (Chrome 73 compatibility)