Thanks for opening an issue. I suspect some sort of race condition. For instance, if an image hasn't loaded before Panzoom reads the dimensions of elements. If you could rule that out, that would be helpful. You can do that by waiting to initialize Panzoom for a long timeout (like 5sec) and see if you still have the same issue. If it does seem related, you may be able to fix it by binding to load events. Let me know if that helps.

Describe the bug

I'm not sure why, but sometimes when Panzoom initializes, the image is not always centred. I have a single image in my wrapper, and I want it to fill the wrapper, like cover in css, and allow you to pan to the edges. But sometimes when I load the page, it's filling properly, and sometimes it's shifted down like 100 pixels, then jumps back to the right spot when I trigger a pan.

Your environment

• Version of panzoom: 4.5.1
• Browser and browser version: MS Edge version 109.0.1518.70 (Official build) (arm64 - on macOS). It does the same thing on Chrome.

Expected behavior

When the page loads, the image should be centred, with the top of the image at the top of the container and zoomed to cover the rest of the wrapper.

Actual behavior

It seems to randomly work, and randomly load with the image down 100 or so pixels. It jumps back to the right spot when I pan.

Steps to reproduce

I'm using Parcel as a build process. Developing using parcel to start a server at localhost:1234, and parcel watch so it reloads when I save. I don't think this matters, as it was doing the same thing with a built version of the project.

<div class="waldo-game__pan-area">
  <div class="waldo-img__wrapper">
    <img src="../public/img/waldo/scenes/scene1.jpg" alt="Waldo" class="waldo-img">
    <!-- Viewbox is the native image dimensions, to preserve the aspect ratio -->
    <svg class="waldo-svg" viewBox="0 0 2160 1449">
      <!-- Circles etc are drawn via js when the user clicks on the image -->
    </svg>
  </div>
</div>

The rest of the markup and css is on the jsbin I tried making, but it doesn't really show what I'm seeing. https://jsbin.com/ravurinere/edit?html,css,js,output

It works when the transform is transform: scale(1.60003) translate(0px, 70.3135px); but then it'll randomly have transform: scale(1.60003) translate(65.5087px, 184.572px);

Sorry if this is a bit of a messy bug report. I'm not sure why the initial state isn't consistent on page load.

Create 2023-01-30.md

Originally posted by @khetaramsb in https://github.com/jquery/jquery/issues/5177#issuecomment-1381649144

After upgrading jQuery from 3.6.0 to3.6.3 pseudo selector :before does not work in selector list with Firefox. Everything works with Chrome.

This worked in 3.6.0 jQuery(".inline-dialog-content:before").css({'left': 40});

In 3.6.3 it gives following error:

Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: before

And...we discussed this further in the same meeting and completely reversed. Now that :has is going to be unforgiving in the spec, it seems unlikely for that situation to arise again. We're considering going back to the old way now.

We've discussed the options, and jQuery is now as unforgiving as CSS.supports. It used to be as forgiving as qSA, but now that the spec has introduced what's ironically called "forgiving parsing", I'm not sure we have a choice anymore. CSS.supports is still the right way to go. It's just unfortunate that we can't really pick and choose which selectors we want to be more forgiving with.

Originally posted by @khetaramsb in https://github.com/jquery/jquery/issues/5177#issuecomment-1381649144

After upgrading jQuery from 3.6.0 to3.6.3 pseudo selector :before does not work in selector list with Firefox. Everything works with Chrome.

This worked in 3.6.0 jQuery(".inline-dialog-content:before").css({'left': 40});

In 3.6.3 it gives following error:

Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: before

You are correct. It’s another selector that the is technically invalid but the qsa parser forgives. Using CSS.supports seems to not have the same forgiveness in its parser.

fix(windows): add bashrc to bootstrap

Create 2022-12-19.md

Create 2023-01-09.md

Create 2023-01-23.md

fix(bash_profile): add gnupg to windows path

feat: support attached shadow dom elements (#618)

Original implementation did not properly handle nested shadow dom elements.

Updated the traversal to manually step through the dom to ensure that all shadow dom ancestors are properly handled.

PR Checklist

Please review the guidelines for contributing to this repository.

• [X] I am requesting to pull a topic/feature/bugfix branch (right side). In other words, not main.
• [X] I have run yarn test against my changes and tests pass.
• [X] I have added tests to prove my fix is effective or my feature works. This can be done in the form of unit tests in test/unit/ or a new or altered demo in demo/.
• [X] I have added or edited necessary types and generated documentation (yarn docs), or no docs changes are needed.

Description

Updates the isAttached helper to handle shadow dom elements. ~~If the passed element's root node is a ShadowRoot, it sets parent to the ShadowRoot's host and subsequently checks if the host is attached; otherwise it falls back to the pre-existing functionality.~~

With additional testing, I found that the prior change was not sufficient to handle multiple nested shadow dom elements. The logic has been updated to manually traverse through the dom (handling both regular & shadow nodes) to ensure that any nesting is properly accounted for.

Fixes: #536

Yes, this looks good. Sorry I haven't gotten to it sooner.

fix(aliases): give aws vault keys a longer duration

fix(aliases): give aws vault keys a longer duration

fix(aliases): fix dstartt

fix(aliases): use aws-vault in worbler docker command