Append child glitch in Safari

[kvnapavl]

When appending paper-slide to l2t-paper-slider with appendChild('paper-slide-object') in Safari, the slides get stacked vertically instead of horizontally in the slider.

This also happens in Chrome and Safari when beautifying the code in the l2t-paper-slider.html file.

I'm not sure how to properly trace this bug since I am getting different behavior in each browser. Did you run into this at all during development?

Does the paper-slide need to be appended with a transform?

Any help would be appreciated...

[Link2Twenty]

This is the code I use to append a slide, are you doing the same?

  function addSlide() {
    var selector = document.querySelector('l2t-paper-slider');
    var node = document.createElement("paper-slide");
    var textnode = document.createTextNode("Demo slide");
    node.appendChild(textnode);
    selector.querySelector('#container').querySelector(".slider__slides").appendChild(node);
    ++selector.totalSlides;
  };

[kvnapavl]

I tried that, but was having the same problems as using this scheme...

I am having a probably related problem where parts of the push function are getting called before previous operations have been completed, but am unable to get a working solution. I had tried to add css properties to subDiv with .classList.add('className') and the styles weren't getting applied.

Using this code I see the new paper-slide in the DOM with Safari inspector and I see a new slider-dot on the screen, but the appended slides are hidden from view, and I think they are being vertically stacked beneath the first slide.

<modern-carousel class="slideNav" id="carouselCart" total-slides="{{slides}}">
    <div id="container" class="slider style-scope modern-carousel" data-pos="0">
      <div id="attachSlides" class="slider__slides style-scope modern-carousel" style="transform: translateX(0%);">
        <!-- Append slides here -->
      </div>
    </div>
</modern-carousel>     

 _pushRecipeToSlide: function () {

    // Set carousel slide count
    var carousel = this.$.carouselCart;
    ++carousel.totalSlides;

    // Create slide
    this.slide = document.createElement('paper-slide');
    var slideId1 = 'item_' + localStorage.slideCount;
    this.slide.setAttribute('id', slideId1);

    // Add paper-slide-card div to paper-slide
    var subDiv = document.createElement('div');
    subDiv.style.cssText = 'background-color: white;border-radius: 15px;margin: 4vw;width: 92vw !important;--paper-slide-width: 92vw !important;-webkit-box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.5);box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.5);';

    // Create data for slide
    this.slideData = document.createElement('lab-recipe-item');
    var slideId2 = 'recipe_' + localStorage.slideCount;
    this.slideData.setAttribute('id', slideId2);

    // Append nodes to DOM
    this.$.attachSlides.appendChild(this.slide).appendChild(subDiv).appendChild(this.slideData);

  }

It only fails in Safari :(

[kvnapavl]

If I set total-slides="0" for an empty carousel, and then append, the first slide is added properly, but then once a second slide is added, I get the following error in Safari: 'TypeError: undefined is not an object (evaluating 'dotElem.getAttribute')', which is thrown on line 249 where newPos = parseInt(dotElem.getAttribute('data-pos')),

In Chrome the slider is does not attach to the DOM and Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. is thrown.

[Link2Twenty]

@kvnapavl why did you close this? Were you able to find a solution? 🙂