Different native and polyfill

this-spring commented 3 years ago

use

img in shadowroot
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 commented 2 years ago

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 commented 2 years ago

The polyfill is being removed in https://github.com/w3c/IntersectionObserver/pull/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!

w3c / IntersectionObserver

Different native and polyfill #481

use

different

code