1012202 - eBay Messages: textarea is expanded while typing due to the scrollHeight change with Firefox 29

Status: RESOLVED WORKSFORME

(Web Compatibility :: Site Reports, defect)

Description

[Kohei Yoshino]

Users are reporting a typing issue on eBay Messages starting with Firefox 29. Seems like the same issue is happening on IE 10. Anyone has an eBay account for test?

http://forums.mozillazine.org/viewtopic.php?f=9&t=2830601
https://input.mozilla.org/en-US/?q=ebay&product=Firefox&locale=en-US&version=29.0.0

Comment 1

[Kohei Yoshino]

I have created another account to compose a message. It's a side effect of Bug 157846.

Comment 2

[Kohei Yoshino]

Attachment: testcase

Comment 3

[Kohei Yoshino]

Mentioned this in the site compat doc.
https://developer.mozilla.org/en-US/Firefox/Releases/29/Site_Compatibility#CSS

Comment 4

[Kohei Yoshino]

A *quick* solution here is:

1) Change the padding to 5px 
2) Change the condition to

> if (navigator.userAgent.match(/Firefox\/(\d+)/i) && parseInt(RegExp.$1) < 29)

Comment 5

[Karl Dubost💡 :karlcow]

Kohei,

> if (navigator.userAgent.match(/Firefox\/(\d+)/i) && parseInt(RegExp.$1) < 29)

Which script are you talking about? :)
Which sites are we talking about? URL field in the bug report.

Comment 6

[Kohei Yoshino]

Looks like the script is embedded in HTML that requires sign-in. Here's a code snippet.

_d.add('message_cnt','keyup',function(event) { this.increaseSize("message_cnt"); },vjo.darwin.app.mymessages.rtq.RTQForm);

increaseSize:function(eleId){var ele=this.vj$.E.get(eleId);var sheight=ele.scrollHeight;if(sheight>45){if(navigator.userAgent.toLowerCase().indexOf('firefox')>-1){ele.style.height=(sheight)+"px";}else{ele.style.height=(sheight-10)+"px";}}}

Comment 7

[Jacob Champlin]

I had the same issue with Firefox 29, and our autoexpanding textarea code.  Starting with Firefox 29 every character entered into a textarea with css "overflow: hidden", will increase the textarea.scrollHeight but 5px.   I found a workaround by setting "overflow: scroll" prior to asking for scrollHeight.  Here is our code:

Common.autoexpandingtextarea = function(element, params) {
	var self = this;
	var jQueryElement = j(element);
	if (jQueryElement.length == 0) { return false; }

	var options = j.extend({
		minHeight: jQueryElement.height(),
		maxHeight: 155,
		onUpdate: null
	}, params);
		
	this.init = function() {
		jQueryElement.height(options.minHeight).on("keyup", self.updated);
		self.updated();
	};
	
	this.updated = function() {
		// Starting in Firefox 29 in order to get acrurate scrollHeight overflow = scroll
		jQueryElement.css("overflow", "scroll");
		var scrollHeight = jQueryElement.get(0).scrollHeight;

		var newHeight = Math.max(options.minHeight, Math.min(scrollHeight, options.maxHeight));
		jQueryElement.height(newHeight).css("overflow", (scrollHeight > newHeight) ? "auto" : "hidden");
		
		if(options.onUpdate) { options.onUpdate(); }
	};
	
	this.init();
};

Comment 8

[Karl Dubost💡 :karlcow]

Moving to desktop component.
We have contacts with eBay. We might be able to get help from them.
Desigan, could you help find the right person for this one?

Thanks.

Comment 9

[Desigan Chinniah [:cyberdees] [:dees] [London - GMT]]

More than happy to put this on the radar off my contacts. 

However rather than just pointing to the bug could someone provide me some context via email — and I'll then add Jonny to the thread and point him to the bug as well. He'll then provide us direct contact to the team that works on the eNay Messages/Inbox component.

Comment 10

[Karl Dubost💡 :karlcow]

What I sent to Desigan and Jonathan.

Desigan, Jonathan,

About the bug 
https://bugzilla.mozilla.org/show_bug.cgi?id=1012202

On Ebay messages [1], an issue started with version 29 of Firefox and version 10 of IE. When someone is typing a message, the textarea expands little by little. It's a side effect of fixing the bug 157846 [2] " Incorrect implementation of padding on textarea elements (scrollbars/resizer wrongly positioned)". A human friendly explanation of the textarea bug has been given in Firefox Site Compatibility fixes [3].

A suggested fix for Ebay has been proposed in #Comment 7 of the bug. Feel free to use it. If you do something else, it would be cool if you could share in the bug itself what was the solution found by your team. I'm pretty sure it could help others. 

Thanks a lot.

[1]: http://contact.ebay.com/ws/eBayISAPI.dll?ReplyToMessages
[2]: https://bugzilla.mozilla.org/show_bug.cgi?id=157846
[3]: https://developer.mozilla.org/en-US/Firefox/Releases/29/Site_Compatibility#CSS
[4]: https://bugzilla.mozilla.org/show_bug.cgi?id=1012202#c7

Comment 11

[Desigan Chinniah [:cyberdees] [:dees] [London - GMT]]

Jonny has passed this onto the appropriate team internally. Hopefully they will make an appearance on this bug.

Comment 12

[Mike Taylor [:miketaylr]]

Kohei, would you be able to test if this still reproduces? Thanks!

Comment 13

[Mike Taylor [:miketaylr]]

ni? to try to repro myself.

Comment 14

[Mike Taylor [:miketaylr]]

This doesn't reproduce for me anymore. Let's close.