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

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

    XMLWordPrintable

Details

    • Bug
    • Resolution: Fixed
    • 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)

    Description

      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

      Attachments

        Issue Links

          Activity

            People

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

              Dates

                Created:
                Updated:
                Resolved:

                Time Tracking

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