These are chat archives for mirumee/saleor

25th
Nov 2018
M Abdullah Abid
@wulaaf
Nov 25 2018 10:26

@wulaaf
Bug: product page loads images correctly but once I move to the second image and scroll down, the image disappears. Has anyone come accross this?
Only happens on mobile devices

** Product image carousel disappears when I scroll down and up on mobile. I’ve tried running through the code but can’t quite figure out why it is happening.

Screenshot 2018-11-25 15.26.22.png
Click right arrow to navigate to second image, scroll all the way down and then scroll up
NyanKiyoshi
@NyanKiyoshi
Nov 25 2018 12:00
@wulaaf I can't reproduce. What browser, browser version/ system
Filip Kucharczyk
@Pacu2
Nov 25 2018 12:55
Can't reproduce as well, does it happen on the demo store? Or just your local instance?
M Abdullah Abid
@wulaaf
Nov 25 2018 13:51
Chrome and Safari. Both local and demo.
Weird
M Abdullah Abid
@wulaaf
Nov 25 2018 13:59
Same thing happening in Firefox as well
Hmm could it be they're all using a cached css or js
Outdated css or js file*
M Abdullah Abid
@wulaaf
Nov 25 2018 16:39

Still happening. I check it on OnePlus 6, iPhone 6S and iPhone X in multiple browsers, Chrome, Firefox and Safari. The same thing happening.

@NyanKiyoshi, @Pacu2, may I ask on what device and browser did you try to reproduce?

Just tested on an iPad mini 2, same thing -__-
NyanKiyoshi
@NyanKiyoshi
Nov 25 2018 16:49
@wulaaf tried on Firefox Focus, on Android
M Abdullah Abid
@wulaaf
Nov 25 2018 16:51

https://demo.getsaleor.com/en/products/white-plimsolls-88/

Did you click right to move over to a second image?

or third or whatever and then scroll?
NyanKiyoshi
@NyanKiyoshi
Nov 25 2018 16:52
Yes
I never had this issue on mobile with Saleor
M Abdullah Abid
@wulaaf
Nov 25 2018 16:53
Could it be an issue with the carousel package?
Also, are you emulating a mobile view from the browsers or doing it on the actual mobile phone?
NyanKiyoshi
@NyanKiyoshi
Nov 25 2018 16:54
On a phone yes
M Abdullah Abid
@wulaaf
Nov 25 2018 16:56
Hmmmmmmm
M Abdullah Abid
@wulaaf
Nov 25 2018 17:02
AAAHHHH!
Found the issue
It’s the updateProductImageHeight function
It sets the height = 0px for some reason
updateProductImageHeight in saleor/static/components/misc.js
M Abdullah Abid
@wulaaf
Nov 25 2018 17:11
M Abdullah Abid
@wulaaf
Nov 25 2018 18:25
// Only update product-image height after 5ms when window size changes
// This is to prevent window resize event is triggered multiple times at the same time.
// This can also prevent that window is resized but bootstrap's responsive component
// is not quick enough to resize too.
$(window).resize(function() {
if (this._timeout) clearTimeout(this._timeout);
this._timeout = setTimeout(function() {
$(this).trigger('resized’);
}, 5);
});
FYI commenting out this chunk of code solves my issue*
Aymane
@Sshuichi
Nov 25 2018 18:29
Hi everyone
Any one has a clear documentation for Docker deployment?
Any steps that I should take before
$ docker build -t mystorefront .
??
#3325 Related issue
NyanKiyoshi
@NyanKiyoshi
Nov 25 2018 19:54
I accidentally reproduced your issue @wulaaf.
  1. Click the right arrow;
  2. Rotate the screen (maybe it's reproducible on desktop through resizing?).
M Abdullah Abid
@wulaaf
Nov 25 2018 21:20
Yup that is correct. It happens whenever a resize takes place. I'm guessing on phones when we scroll down, the top navbar disappears therefore there is more space for the browser then it initially had which causes a resize of then page causing it to disappear. I'm sure the time out has to do something with it cause once I removed it, everything works perfectly across all devices