Uploaded image for project: 'ZK'
  1. ZK
  2. ZK-4977

Triggering @MatchMedia by immediate resizing is not working in Desktop since Chrome 92

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Normal Normal
    • 9.6.0
    • Freshly, 9.5.1.3, 9.6.0
    • Browser Issue, Databind 2
    • Chrome Version 92.0.4515.107 (Official Build) (x86_64)
      Edge Version 93.0.957.0 (Official build) Dev (x86_64)

    • None

      Steps to Reproduce

      https://zkfiddle.org/sample/118bcv/2-ZK-4977
      Run in Chrome 92 (Desktop)

      Try using the Responsive view to modify the width to 768px and 414px.

      Current Result

      The @MatchMedia is working at the first time, but when the width is changed the @MatchMedia is not working.

      Expected Result

      The @MatchMedia is always working.

      Debug Information

      1. Since Chromium 92, it needs <meta name="viewport"> to enabled window.matchMedia changes. Not sure if it's a bug or feature yet.
      2. It acts normally if a user resizes the browser window quickly.
      3. Block zk.wcs (norm.less) and it runs smoothly.

      .z-temp,
      .z-modal-mask {
      	//.size(100%, 100vh); // the problem line, use 100% instead of 100vh solves the issue
      	background: @maskBackgroundColor;
      	.opacity(0.6);
      	position: fixed;
      	top: 0;
      	left: 0;
      }
      

      Workaround

            rudyhuang rudyhuang
            rudyhuang rudyhuang
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 1 day
                1d
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 3 hours Time Not Required
                3h