Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Different native and polyfill #481

Closed
this-spring opened this issue Sep 27, 2021 · 2 comments
Closed

Different native and polyfill #481

this-spring opened this issue Sep 27, 2021 · 2 comments
Labels
polyfill

Comments

@this-spring
Copy link

use

  1. img in shadowroot
  2. transform to change img position

different

When the button is clicked, the native performance will output shadowImg2, and the polyfill will display abnormally.

code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>native</h1>
  <template id="userCardTemplate">
    <style>
       .scroll1 {
        height: 200px;
        width: 400px;
        position: relative;
        overflow: hidden;
      }
    </style>
    <div class="scroll1">
      <img id="shadowImg1" src="../png.png" style="transform: translate(0%, 0%) translateZ(0)" alt="" srcset="">
      <img id="shadowImg2" src="../png.png" style="transform: translate(0%, 0%) translateZ(0)" alt="" srcset="">
    </div>
    <button id="translate">translate</button>
  </template>
  <user-card></user-card>

</body>
<script>
const intersectionObserver = new IntersectionObserver(function(entries) {
  for (let i = 0; i < entries.length; i += 1) {
    if (entries[i].intersectionRatio !== 0) {
        console.log(entries[i].target.id);
      }
  }
});
class UserCard extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow( { mode: 'closed' } );

    const templateElem = document.getElementById('userCardTemplate');
    this.content = templateElem.content.cloneNode(true);

    const imgs = this.content.querySelectorAll('img');
    for(let i = 0; i < imgs.length; i += 1) {
      intersectionObserver.observe(imgs[i]);
    };

    const img = this.content.querySelector('#shadowImg');
    this.count = 1;
    this.content.querySelector('#translate').addEventListener('click', () => {
      imgs[this.count - 1].style['transform'] = `translate(0%, ${-100}%) translateZ(0)`;
      imgs[this.count].style['transform'] = `translate(0%, ${-100}%) translateZ(0)`;
    });
    shadow.appendChild(this.content);
  }
}
  window.customElements.define('user-card', UserCard);
</script>
</html>
@miketaylr
Copy link
Member

the polyfill will display abnormally.

@this-spring can you clarify what you mean here?

Also thank you for the test case, would it be possible for you to put it somewhere like jsfiddle.net or codepen.io (include one for the polyfill case), or online elsewhere?

@miketaylr
Copy link
Member

The polyfill is being removed in #499 (see #433 for discussion).

If you can still reproduce bugs in the native implementations, filing bugs in the various bug tracks would be really helpful.

I'm going to close this as wontfix, but thanks for taking the time to report this issue!

@miketaylr miketaylr closed this as not planned Won't fix, can't repro, duplicate, stale Jun 15, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
polyfill
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@miketaylr @this-spring