0

I am a beginner in coding and as a challenge, I decided to make my own portfolio website on react.js + tailwind without the use of extra plugins. (I know, I know, as I figured out later, it was not my best idea)

The main complexity was around making a background behind the slider to look similar to the central slide, and to make a smooth transition.

After hosting the website, I found a glitch that is only visible on mobile browsers. Basically, every time when I change a slide, in the moment of changing State, it flicks the next slide in the array of slides for a millisecond.

I was able to see the same issue in dev tools but does not work every time. 100% visible only on mobile browsers

Small clarification: the slider is functioning by rotating elements within the array by the method Splice. So elements [1],[2], and [3] are always visible on the desktop version while elements [0] and [4] exist but have zero opacity (it is made for the sake of the smooth background transitioning).

The glitch itself: On clicking 'left' the image from element [1] is becoming the central image [2] and it flicks somehow the image from [0] for a millisecond. The same behavior is related to the right image from element[3] and background images. Though, it does not affect the left visible slide [1], because its predecessor is only becoming visible after State change.

My best assumption is that the issue is related to the component "Portfolio" 126 line in the code, but I can not find any other solutions which work.

  const onChangeSlide = (direction) => { 
    if (direction === "left") {
      setTimeout(() => {  
        slides.splice(0, 0, slides.splice(length-1, 1)[0]);  
        setSlider((prev) => ({...prev , ...slides}));
        },700);

You can see the hosted website here > https://Othary.github.io/ArtPhoto

Link to the code here > https://github.com/Othary/PortfolioTest.git

GIF of the issue > https://1drv.ms/u/s!ApRsK-vfrh8MrY9guwisAKJl5bJAfA?e=vkjdGX

I will appreciate any help. Thank you in advance.

Regarding the first issue I checked all images, and their order, and removed StrictMode. No luck for me. I can not grasp how the slider shows the element which supposed to be visible only on the next click. And it is not visible on the fast internet desktop version. As stated above, my best guess is that it is related to the way how I change State.

UPDATE: It looks like after scrolling through all carousels BOTH left and right the flick is disappearing. So, I assume, it somehow connected with the browser's cache, but I don't understand why it needs to be scrolled in both directions first before the issues disappear. All files are supposed to be preloaded after the first scroll in either direction, not both.

Please help

Sergey Ivannikov
  • 1
  • 1
  • UPDATE. For those who are interested the solution was found. Apparently, there is a small amount of time passing between render and when useEffect fires itself. And for apps with complicated animation, this lag can create visible distortion especially visible on mobile devices. It is not related to internet speed, but to the device's power. In my case, the complicated animation was Translate and Scale properties combined with the calculation of a proper placement with getBoundingClientRect. – Sergey Ivannikov Feb 08 '23 at 08:12
  • The solution for this was added by React team themself: useLayoutEffect hook. This hook works absolutely the same way as useEffect but triggers in the moment of rendering itself. I hope this post will help at least someone. – Sergey Ivannikov Feb 08 '23 at 08:12

0 Answers0