Media library: UI is buggy in some cases

Follow

Alfiya Karimova

• January 05, 2022 12:33

Hi,

It seems there is a bug in the media library where, in some (race) conditions, a part of the UI is not visible, see the screen record: https://gifyu.com/image/SSAsW
I wrote a simple demo: https://codesandbox.io/s/dreamy-bogdan-6til6?file=/src/App.js (https://6til6.csb.app/)

After investigation, it seems that a CSS variable is not well computed: `--vh: 0px;`.
Indeed, if I manually change the value for `7px` for example, the UI is well displayed: https://gifyu.com/image/SSAxs

Best regards,

 

 

0

• 

  Millie Axelrod

  • January 06, 2022 12:41

  Hi Alfiya,

  Thank you for reporting this!

  Following your code example and demo, I'm afraid we were unable to reproduce this issue.

  Can you please let us know if there are any console errors? Also, if you could provide details under which conditions this issue occurs?

  If you prefer, you can open a support request here with your cloud name and any additional details that can help us reproduce this.

  Thank you,
  Millie

   

  0

  Comment actions Permalink
• 

  Loïc

  • January 07, 2022 09:58

  Hi Milie,

  Thanks for your response.

  I am afraid I can't provide more details, it's seems hazardous. We met the issue with an extension-free chrome 96.
  There is no valuable logs in the console expect the log about the joke "John Carmack" ;)
  Note that the issue only appears on the "image detail" screen.

  

   

  0

  Comment actions Permalink
• 

  Mo Ip

  • January 08, 2022 00:50

  Hi Alfiya,

  Yes, I'm able to reproduce the issue when the width of the browser window is narrow.

  There is a function  appHeight() to set the value of "--vh".  When the browser window is narrow, window.innerHeight is set to 0 and cause the function appHeaith() to set --vh to 0. 

  I'm checking internally and will keep you posted on my findings.

  Thanks,

  Mo

  0

  Comment actions Permalink
• 

  Mo Ip

  • January 21, 2022 20:58

  Hi Alfiya,

  Most of the time we tried we were not able to reproduce the issue.  I was only if the browser window is on the side of codepen.  If the browser window is at the bottom, the issue is not reproducible.

  Are you having any of this issue on another environment other than codepen?

  Thanks,

  Mo

  0

  Comment actions Permalink
• 

  Mo Ip

  • January 24, 2022 16:46

  Hi Alfiya,

  I'm following up with you to see if you can reproduce the issue again as we are not able to.

  Thanks,

  Mo

  0

  Comment actions Permalink
• 

  Loïc

  • January 25, 2022 10:57

  Hi Mo,

  Thanks for your following along and also, sorry for the delay.

  I can reproduce the issue outside of Codepen, in our own closed source project. Our users have never complained about the issue, it has been met only by me. Our integration is nearly the same than the codepen.
  I can reproduce it but it's not systematic, I should open/re-open the media library multiple time, only reproduced with Chrome.
  My co-workers did not reproduce it but I am the only one to work on my laptop with a small window size: 775x1512.

  Like I am the only one complaining about this, I think you can ignore it for now ;)

  0

  Comment actions Permalink
• 

  Mo Ip

  • January 26, 2022 01:47

  Hey Loic,

  Thanks for the update.  

  I tried it many times a day ago and was not able to reproduce it on codepen.  We have a few other teammates also tried but none of them were able to reproduce it.

  If you like to pursue it furhter, you can open a ticket to http://support.cloudinary.com and send us a screen recording and we can continue this investigation.

  Thanks,

  Mo

  0

  Comment actions Permalink

Post is closed for comments.