Materialize: Bug on mobile: Material Box doesn't work under certain conditions

[ox42]

Here is a trimmed version of the materialize page about Media. http://output.jsbin.com/kizewahuma
Here's the code again: http://pastebin.com/wJWUkKrr (if that page expires for some reason, i don't use jsbin.com that often)

Steps to reproduce:

1. Open Google Chrome (desktop) and go to http://output.jsbin.com/kizewahuma
2. Click on the image. Materialbox works ok. (except for one error message in the developer console, which is even there when you open the materialize page about Media).
3. Now. Go to Options -> More tools -> Developer tools and emulate a mobile device (say iPhone 6 or Galaxy S 3). Click on the image. Doesn't work, because the page jumps up, causes a scroll effect to be triggered, and (because materialbox get's closed on a scroll effect), the image is not presented.

Removing the scroll handler isn't an option, because (as the page jumps), the image is not centered correctly in the view anyway.

Two notes:

1. On desktop it all works correctly, even if the width of the window is very small. But, on mobile it doesn't - making me believe that some touch event handler is probably causing this. (but I have no time to investigate further)
2. You can reproduce this on http://materializecss.com/media.html . Just go the page, open Google Chrome developer tools, emulate Mobile, then go to Elements and remove everything after the image.

[Tim-arts]

It works in all cases with me.

[ox42]

Hm, I'm actually pretty sure that it doesn't work - as I've tested both in Chrome and on two of my mobile devices. Another person also tested it (he's actually the one that reported it to me).

Maybe I didn't explain what the problem is correctly - so I'll try to find someway to add a video showing the steps to reproduce. Thanks for the fast response.

[acburst]

Hmm I can't seem to reproduce either. If you could give a code example of just the HTML that I could use locally and test on my own mobile device that breaks it, it would be helpful.

I did fix that undefined error in 3546686

[ox42]

@TyrionGraphiste , @acburst
I've just uploaded a video (.mp4 format) showing the issue here.
Because jsbin.com seems to be uncooperative, I've uploaded the test page on another url.
Now, I don't know what mobile devices you have, but if I open the test page with my Samsung Galaxy phone (I've tested with Google Chrome), you can clearly see the issue - that you can't materializebox the image. So, it's not just the emulator.

Sorry for the delay, I wanted to upload the video right away, but got carried away with another job.

[cyberjithu]

I'm also facing some issues with materialbox when using with ngRoute
working: http://codepen.io/jithu/pen/EPvpLB
NOT working: http://codepen.io/jithu/pen/eJGmaz

[maciejmyslinski]

I have the same issue. Very annoying.

[gkarugi]

I have reproduced the steps and something to note is sometimes it works sometimes it doesn't.

[fega]

When you're using a router, you need to use: $('.materialboxed').materialbox() when the route is mounted.

but in my case, is working in a strange way:

http://www.meloway.com/

try it in the bottom gallery, you can't click twice.

[StephSz]

Appears to work fine with Firefox for Android, but issue still exists with Chrome for Android.

[truehlidskjalf]

I have the same issue as fega at http://www.meloway.com also on desktop chrome and firefox.

[johnsnails]

I found another/similar maybe related condition that creates an issue. When an image is not in view but you have to scroll to it on the page, those particular images will be affected. For example. Using pre tags to push down the content on here:
http://materializecss.com/media.html
If I then scroll down to the image (in FireFox) it won't behave as expected. However if I simply 'zoom out' so I can see the image, it starts working again as expected.

Hope this helps someone.

[zaturazzo]

At http://www.meloway.com
I have same problem and then I try to remove "data-caption" out of img tag.it work for me.

[acburst]

Fixed the data-caption bug in 6321a78

[tomscholz]

I wasn't able to reproduce the problem and meloway.com seems to not use materialize anymore. Feel free to reopen it, if it's still necessary.

[pawelos076232]

I found that this bug reproduces on Google Chrome only when the image contain responsive-img class. Without this class it works ok.
Example website: http://cloudapps.io/test/materialbox.html
I already tested it also on my own website because I faced same issue.
My example: https://psrecords.pl/wyposazenie/
See my video

Could somebody reopen this issue?

[pol-milian]

@pawelos076232 I have found the same issue.

Removing the responsive-img class solves it but then the zoomed image has the wrong proportions.

[pawelos076232]

@Polcius I can't see it on my website, but I reproduced the issue that is explained by the @ox42 in the first post of this thread.

[pawelos076232]

@tomscholz could you look at this again with my tip about the issue and reopen it plz?

[tomscholz]

Which version of materialize are you using? / Have you tried 1.0.0-alpha.x?

[pawelos076232]

@tomscholz oh sorry, I forgot to tell. I'm using latest stable version of Materialize 0.100.2. I didn't try alpha yet.

[pawelos076232]

When I'm testing 1.0.0-alpha.4 and 1.0.0-beta, now there is no problem with image with the responsive-img class 😄 I think, this bug is finally fixed 👍

[pol-milian]

@pawelos076232 Yeah! It has been fixed apparently... Now it works!

[simoexpo]

For me this bug still exists if the image width is defined as % (for example width="50%")

[websiteinfo]

@simoexpo funny thing, I have older website on v0.97.1 and works well :) on v0.100.2 is a problem...

[popejhonpaul]

I am also experiencing a bug with the materialboxed, it does not center-align if you zoom it out. I tried adding:

.materialboxed{ display: inline-block; }

, but it makes the animation weird. It goes from left to center.

[t-walker-wei]

For the last version v1.0.0, not work for me when have scrollbar for the long page. I put the images inside table.The materialboxed
works in the top section of the page.If I scroll down to the bottom section, materialboxed not work.

The lib change style of .material-placeholder -> change the structure of the table -> trigger scroll event.