Firefox problem

[eszakacs]

When I upload a large image (3-5 MB) whit Firefox the image doesn't appear. Whit Chrome is working fine. Has anybody experienced the same problem?

[polo2ro]

I have seen the problem, but also on relatively smaller images.

i got this error in console when the image doesn't appear:

TypeError: Argument 1 of Node.contains does not implement interface Node.[Learn More]  vendor.bundle.js%20line%20309%20%3E%20eval:5576:13
	FocusOriginMonitor.prototype._onBlur webpack:///./~/@angular/material/@angular/material.es5.js?:5576:13
	FocusOriginMonitor.prototype.monitor/blurListener webpack:///./~/@angular/material/@angular/material.es5.js?:5396:71
	ZoneDelegate.prototype.invokeTask webpack:///./~/zone.js/dist/zone.js?:424:17
	Zone.prototype.runTask webpack:///./~/zone.js/dist/zone.js?:191:28
	ZoneTask/this.invoke webpack:///./~/zone.js/dist/zone.js?:486:28
	FocusTrap.prototype.focusFirstTabbableElement webpack:///./~/@angular/material/@angular/material.es5.js?:4609:13
	FocusTrap.prototype.focusInitialElement webpack:///./~/@angular/material/@angular/material.es5.js?:4599:13
	FocusTrap.prototype.focusInitialElementWhenReady/< webpack:///./~/@angular/material/@angular/material.es5.js?:4550:78
	SafeSubscriber.prototype.__tryOrUnsub webpack:///./~/rxjs/Subscriber.js?:238:13
	SafeSubscriber.prototype.next webpack:///./~/rxjs/Subscriber.js?:185:17
	Subscriber.prototype._next webpack:///./~/rxjs/Subscriber.js?:125:9
	Subscriber.prototype.next webpack:///./~/rxjs/Subscriber.js?:89:13
	FirstSubscriber.prototype._emitFinal webpack:///./~/rxjs/operator/first.js?:135:13
	FirstSubscriber.prototype._emit webpack:///./~/rxjs/operator/first.js?:118:9
	FirstSubscriber.prototype._next webpack:///./~/rxjs/operator/first.js?:97:13
	Subscriber.prototype.next webpack:///./~/rxjs/Subscriber.js?:89:13
	EventEmitter.prototype.subscribe/schedulerFn< webpack:///./~/@angular/core/@angular/core.es5.js?:3839:36
	SafeSubscriber.prototype.__tryOrUnsub webpack:///./~/rxjs/Subscriber.js?:238:13
	SafeSubscriber.prototype.next webpack:///./~/rxjs/Subscriber.js?:185:17
	Subscriber.prototype._next webpack:///./~/rxjs/Subscriber.js?:125:9
	Subscriber.prototype.next webpack:///./~/rxjs/Subscriber.js?:89:13
	Subject.prototype.next webpack:///./~/rxjs/Subject.js?:55:17
	EventEmitter.prototype.emit webpack:///./~/@angular/core/@angular/core.es5.js?:3825:54
	NgZone.prototype.checkStable webpack:///./~/@angular/core/@angular/core.es5.js?:4102:17
	NgZone.prototype.onLeave webpack:///./~/@angular/core/@angular/core.es5.js?:4178:9
	NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvoke webpack:///./~/@angular/core/@angular/core.es5.js?:4140:21
	ZoneDelegate.prototype.invoke webpack:///./~/zone.js/dist/zone.js?:390:17
	Zone.prototype.run webpack:///./~/zone.js/dist/zone.js?:141:24
	NgZone.prototype.run webpack:///./~/@angular/core/@angular/core.es5.js?:4005:51
	AnimationRendererFactory.prototype.scheduleListenerCallback webpack:///./~/@angular/platform-browser/@angular/platform-browser/animations.es5.js?:288:13
	AnimationRenderer.prototype.listen/< webpack:///./~/@angular/platform-browser/@angular/platform-browser/animations.es5.js?:543:17
	listenOnPlayer/< webpack:///./~/@angular/animations/@angular/animations/browser.es5.js?:81:48
	listenOnPlayer/< webpack:///./~/@angular/animations/@angular/animations/browser.es5.js?:81:48
	WebAnimationsPlayer.prototype._onFinish/< webpack:///./~/@angular/animations/@angular/animations/browser.es5.js?:4655:60
	forEach self-hosted:251:13
	WebAnimationsPlayer.prototype._onFinish webpack:///./~/@angular/animations/@angular/animations/browser.es5.js?:4655:13
	WebAnimationsPlayer.prototype._buildPlayer/< webpack:///./~/@angular/animations/@angular/animations/browser.es5.js?:4701:70
	ZoneDelegate.prototype.invokeTask webpack:///./~/zone.js/dist/zone.js?:424:17
	Zone.prototype.runTask webpack:///./~/zone.js/dist/zone.js?:191:28
	ZoneTask/this.invoke webpack:///./~/zone.js/dist/zone.js?:486:28

are you using angular material with the cropper?

[eszakacs]

I'm not using angular material and there is no error message in the console. When I upload an image, the grey canvas appears, but not the image. I have seen this problem with smaller images too. The smaller images sometimes appears, sometimes doesn't. It is strange. I tried with the latest Firefox and with older ones too in different OSs.

[eszakacs]

The plunker demo works fine in Firefox, but it uses the 0.7.7 version. I use Angular 4, so I need a newer version.

[polo2ro]

I also use angular4, i will do some tests in chrome to see if the trace appear, this is probably unrelated

[polo2ro]

on chrome, there is no bug and the trace does not appear. on firefox, the trace appear for every image whatever it is visible or not

[eszakacs]

Yes, on Chrome is working fine. Also on Edge, Safari. Only on Firefox exists this problem.

[Mage111]

Have the same problem, only in FF. same image cannot be loaded in the first time, but loaded in the second time. there is no error message in the console.

[juank11memphis]

Somehow Firefox is slower loading images, I was having the problem and was able to fix it only by adding an onload callback on my image and after the image was fully loaded then setting it in the component.

[polo2ro]

thanks for the tip @juank11memphis

[eszakacs]

@juank11memphis Thank you, i tried and it is working for me too.

[ZeroCR]

This work around brings some performance issues, specially on Edge and IE.

I made it work on firefox using a setTimeout with 0s.

`public ngOnInit() { this.initCropperSettings(); this.cropper.settings = this.cropperSettings; let image: any = new Image(); image.src = this.data.image.src;

setTimeout(() => {
  this.cropper.setImage(image);
}, 0);

}`

[cravter]

thx @ZeroCR, for firefox 0 timeout didn't help me with big images, but 1000 timeout works well.

[SteveVanOpstal]

The solution of @ZeroCR will only work when the timeout is higher than the time it takes to load the image. As @juank11memphis pointed out, you should wait for the image to be loaded and then call setImage

Like this:

public ngOnInit() {
  let image: any = new Image();
  image.onload = () => {
    this.cropper.setImage(image);
  };
  image.src = this.data.image.src;
}