0

HOLA COMUNIDAD!

No fui más preciso en el título porque me cuesta describir el tipo de error que se presenta, nunca antes lo había visto y no puedo rescatar ningún dato ni de los logs ni de la dev console. Pienso que podría ser un conflicto con los archivos .js. El error sucede sólo a veces, puedo estar navegando bien en el sitio durante todo el día y al día siguiente al abrirlo sucede nuevamente. Por esto mismo no puedo asegurar si el error sucede sólo en chrome porque es el navegador que más uso y por ende en el que he advertido el error esporádico. Al abrir el sitio en otros navegadores a simple vista no acontece el fallo y tampoco se levantan excepciones.

El sitio web lo tengo alojado en wordpress.


introducir la descripción de la imagen aquí


introducir la descripción de la imagen aquí

Lo que se ve en las imágenes es intermitente, se van alternando los desencajes estéticos (no sé cómo llamarlo) de un lugar a otro de la página, parpadeante y pseudoaleatorio.


Mi archivo main.js:

jQuery(function($){
    var textWrapper = $('.ml3')[0];
    textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
    anime.timeline({loop: false})
  .add({
    targets: '.ml3 .letter',
    opacity: [0,1],
    easing: "easeInOutQuad",
    duration: 1050,
    delay: (el, i) => 30 * (i+1)
  })
    var textWrapper2 = $('.ml2')[0];
    textWrapper2.innerHTML = textWrapper2.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
    anime.timeline({loop: false})
  .add({
    targets: '.ml2 .letter',
    opacity: [0,1],
    easing: "easeInOutQuad",
    duration: 1050,
    delay: (el, i) => 5 * (i+1)
  })
    /*.add({
    targets: '.ml3',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });*/
});
jQuery(function($) {
  function getOffset(elem) {
    var offsetLeft = 0, offsetTop = 0;
    do {
      if ( !isNaN( elem.offsetLeft ) )
      {
        offsetLeft += elem.offsetLeft;
        offsetTop += elem.offsetTop;
      }
    } while( elem = elem.offsetParent );
    return {left: offsetLeft, top: offsetTop};
  }

  var targets = document.querySelectorAll( '[rel=tooltip]' ),
  target  = false,
  tooltip = false,
  title   = false,
  tip     = false;

  for(var i = 0; i < targets.length; i++) {
    targets[i].addEventListener("mouseenter", function() {
      target  = this;
      tip     = target.getAttribute("title");
      tooltip = document.createElement("div");
      tooltip.id = "tooltip";

      if(!tip || tip == "")
      return false;

      target.removeAttribute("title");
      tooltip.style.opacity = 0;
      tooltip.innerHTML = tip;
      document.body.appendChild(tooltip);

      var init_tooltip = function()
      {
        console.log(getOffset(target));
        // set width of tooltip to half of window width
        if(window.innerWidth < tooltip.offsetWidth * 1.5)
        tooltip.style.maxWidth = window.innerWidth / 2;
        else
        tooltip.style.maxWidth = 340;

        var pos_left = getOffset(target).left + (target.offsetWidth / 2) - (tooltip.offsetWidth / 2),
        pos_top  = getOffset(target).top - tooltip.offsetHeight - 10;
        console.log("top is", pos_top);
        if( pos_left < 0 )
        {
          pos_left = getOffset(target).left + target.offsetWidth / 2 - 20;
          tooltip.classList.add("left");
        }
        else
        tooltip.classList.remove("left");

        if( pos_left + tooltip.offsetWidth > window.innerWidth )
        {
          pos_left = getOffset(target).left - tooltip.offsetWidth + target.offsetWidth / 2 + 20;
          tooltip.classList.add("right");
        }
        else
        tooltip.classList.remove("right");

        if( pos_top < 0 )
        {
          var pos_top  = getOffset(target).top + target.offsetHeight + 15;
          tooltip.classList.add("top");
        }
        else
        tooltip.classList.remove("top");
        // adding "px" is very important
        tooltip.style.left = pos_left + "px";
        tooltip.style.top = pos_top + "px";
        tooltip.style.opacity  = 1;
      };

      init_tooltip();
      window.addEventListener("resize", init_tooltip);

      var remove_tooltip = function() {
        tooltip.style.opacity  = 0;
        document.querySelector("#tooltip") && document.body.removeChild(document.querySelector("#tooltip"));
        target.setAttribute("title", tip );
      };

      target.addEventListener("mouseleave", remove_tooltip );
      tooltip.addEventListener("click", remove_tooltip );
    });
  }

});
jQuery(function($) {
    $(document).ready(function() {
        "use strict";
        var nav = $('nav');
        var navHeight = nav.outerHeight();
        $('.navbar-toggler').on('click', function() {
            if( ! $('#mainNav').hasClass('navbar-reduce')) {
            $('#mainNav').addClass('navbar-reduce');
            }
        })
        // Back to top button
        $(window).scroll(function() {
            if ($(this).scrollTop() > 100) {
            $('.back-to-top').fadeIn('slow');
            } else {
            $('.back-to-top').fadeOut('slow');
            }
        });
        $('.back-to-top').click(function(){
            $('html, body').animate({scrollTop : 0},1500, 'easeInOutExpo');
            return false;
        });
            /*--/ Star Scrolling nav /--*/
            $('a.js-scroll[href*="#"]:not([href="#"])').on("click", function () {
                if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                    var target = $(this.hash);
                    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                    if (target.length) {
                        $('html, body').animate({
                            scrollTop: (target.offset().top - navHeight + 5)
                        }, 1000, "easeInOutExpo");
                        return false;
                    }
                }
            });

            // Closes responsive menu when a scroll trigger link is clicked
            $('.js-scroll').on("click", function () {
                $('.navbar-collapse').collapse('hide');
            });

            // Activate scrollspy to add active class to navbar items on scroll
            $('body').scrollspy({
                target: '#mainNav',
                offset: navHeight
            });
            /*--/ End Scrolling nav /--*/

            /*--/ Navbar Menu Reduce /--*/
            $(window).trigger('scroll');
            $(window).on('scroll', function () {
                var pixels = 50; 
                var top = 1200;
                if ($(window).scrollTop() > pixels) {
                    $('.navbar-expand-md').addClass('navbar-reduce');
                    $('.navbar-expand-md').removeClass('navbar-trans');
                } else {
                    $('.navbar-expand-md').addClass('navbar-trans');
                    $('.navbar-expand-md').removeClass('navbar-reduce');
                }
                if ($(window).scrollTop() > top) {
                    $('.scrolltop-mf').fadeIn(1000, "easeInOutExpo");
                } else {
                    $('.scrolltop-mf').fadeOut(1000, "easeInOutExpo");
                }
            });

            if ($('.text-slider').length == 1) {
            var typed_strings = $('.text-slider-items').text();
                var typed = new Typed('.text-slider', {
                    strings: typed_strings.split(','),
                    typeSpeed: 1800,
                    loop: false,
                });
            }

    });
});

Archivo functions.php con los archivos .js:

<?php
//Load jQuery
function loadjQuery() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', get_template_directory_uri().'/js/jquery.min.js', array(), 2);
    wp_enqueue_script('jquery');
}

//Load js
function add_js(){
    wp_register_script('bootstrap', get_template_directory_uri().'/js/bootstrap/js/bootstrap.min.js', array('jquery'), 40);
    wp_enqueue_script('bootstrap');
    wp_register_script('jqueryMigrate', get_template_directory_uri()."/js/jquery-migrate.min.js", array('jquery'), null);
    wp_enqueue_script('jqueryMigrate'); 
    wp_register_script('jquery.counterup', get_template_directory_uri()."/js/jquery.counterup.min.js", array('jquery'), null);
    wp_enqueue_script('jquery.counterup');
    wp_register_script('jqueryWaypoints', get_template_directory_uri()."/js/jquery.waypoints.min.js", array('jquery'), null);
    wp_enqueue_script('jqueryWaypoints');   
    wp_register_script('easing', get_template_directory_uri()."/js/easing.min.js", array('jquery'), null);
    wp_enqueue_script('easing');    
    wp_register_script('anime', "https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js", array('jquery'), 13);
    wp_enqueue_script('anime');
    wp_register_script('main', get_template_directory_uri().'/js/main.js', array('jquery'), 61);
    wp_enqueue_script('main');


}

?>

Se me olvidó mencionar algo importante: Tras cerrar la ventana, el error perdura por algunos segundos en el resto de las pestañas del navegador.

Les agradezco mucho de antemano, Saludos!!

7
  • Estas usando linux?, a mi a vecez me pasa en ubuntu, mas frecuentemente en chrome cosas extrañas pero normalmente solo me pasan en linux... en windows no me pasan.
    – Layer
    el 27 abr. 2020 a las 19:38
  • En la pestaña network no te aparece un 404? puede que sencillamente no lo encuentre, un problema de carga, revisa en la pestaña source del chrome dev y verifica que esten los archivos que encolas en wordpress el 27 abr. 2020 a las 21:03
  • puede ser también que sea un error de lógica, una condición que no se cumpla en ciertas ocasiones y por eso no genera un error en consola. el 27 abr. 2020 a las 21:06
  • No Michel, lamentablemente tampoco se arroja error en network.
    – Jean Louis
    el 27 abr. 2020 a las 22:03
  • Riven, efectivamente estoy usando linux ahora, pero si no recuerdo mal también vi este error en win (estuve trabajando en windows hace poco)... Haré unas pruebas y te aviso, gracias por el dato
    – Jean Louis
    el 27 abr. 2020 a las 22:04

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.