HTML buttons have not the correct size ONLY in Linux 16.04




3 years ago
2 years ago


(Reporter: dismark, Unassigned)


48 Branch

Firefox Tracking Flags

(Not tracked)


(Whiteboard: tpi:+)


(6 attachments)



3 years ago
Created attachment 8779310 [details]
2 Firefox after click.png

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:48.0) Gecko/20100101 Firefox/48.0
Build ID: 20160728203720

Steps to reproduce:

Create a script in HTML :
<!DOCTYPE html>

	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		.bouton:hover {
		background-color: maroon;
		color: yellow;

		#zone_saisie_identifiant {
			margin-left: auto;
			margin-right: auto;
			width : 10%;
			margin-top: 40px;
			padding: 20px;
			background-color: lightblue;
			text-align: center;
			font-family: Arial;
			font-size: 13px;
			font-weight: bold;
			border: 2px black solid;
			border-radius: 10px;

	<div id="zone_saisie_identifiant">
		<input type="submit" class="bouton" value=">" />
		<br /><br />
		<input type="submit" value=">" />


Actual results:

The buttons are too much big ONLY in Linux 16.04 (was correct on Linux 15.10). The script is also correct under Windows version of Firefox.
The script is correct with Chromium under Linux 16.04.
When you click on the button, its size becomes correct, but you must click again to valid the execution of the action of the button.
This problem appears on several versions of Linux16.04 : Kubuntu and Ubuntu have been tested and give the same result.
All the applications written in PHP/HTML are corrupted in their appearance.

Expected results:

In correct use, the button must execute the action that is programmed.
1. Where do you install Firefox from, and which version are you using?
   Is it distro package or Mozilla's build?

2. what's the "action" you mentioned in Expected results?
   the example doesn't do anything when click those buttons
Flags: needinfo?(dismark)

Comment 2

3 years ago
1 - Firefox has been installed from my distribution.
Version : 48.0 "Mozilla Firefox for Ubuntu Canonical 1.0"
All the previous versions have the same problem since Linux 16.04.

2 - The 'action" doesn't exists in my example : I did not want to have a big script.
To see the action, you can use my site : ""
When you click on a button, WITHOUT release, the button has his normal size.

Comment 3

3 years ago
I just test on Debian : all is correct
Versions : Debian 8 
Firefox 45.2.0.
The problem seems to be on all Ubuntu releases 16.04
Can you test with Mozilla's build?
If the issue doesn't happen with it, it's Ubuntu's package's issue.
about button size, it would be the same bug as bug 1022325.
I just confirmed the issue on Mozilla's build.

not sure about action's bug, I cannot reproduce it.

Comment 6

3 years ago
I used the Mozilla's build and the problem always exists.
I have several operating systems with VirtualBox and the results of my tests are :
With all Linux 16.04 OS (Kubuntu, Ubuntu, Xubuntu) :
With Firefox 45.0.2 : all is OK
With Firefox 47.0 and Firefox 48.0 the problem appears.
Can you describe more about "action" part?
what's the expected behavior and what's the actual behavior?

Comment 8

3 years ago
Created attachment 8780076 [details]
3 Chromium appearance.png

Comment 9

3 years ago
Created attachment 8780077 [details]
4 Firefox on Windows in VirtualBox.png

Comment 10

3 years ago
Created attachment 8780078 [details]
1 Firefox before click.png

Comment 11

3 years ago
The only inconvenience is the anormal size of the buttons.
To illustrate this point, I add 3 images to my previous mail.
"1 Firefox before click.png" is the result when you load my little script (first mail) : the buttons are too big !
"3 Chromium appearance.png" (on Linux 16.04) and "4 Firefox on Windows in VirtualBox.png" are the correct size of the buttons.

The previous image "2 Firefox after click.png" is the result when you click on the upper button WITHOUT release it. Its size becomes normal, but you must click again on the button to execute the action you want (no action in my script, because the PHP code is not written, but this action is always executed).

My test were realized on two different computers : an AMD and an Intel system ; the results are the same.

I have read somewhere on the net (but I don't remember where) that the new release Linux 16.04 don't use the same manner to display graphical informations. (Open-Gl instead of "Direct X" (not sure for the second term ?), and this site explains how to modify the parameters of Firefox. I try to use what was explained, but I don't find the parameters (perhaps it was for Windows version of Firefox).
thanks :)

So, there are the following 3 issues, right?
  A. button size is too big
  B. button size changes by clicking
  C. first click doesn't invoke event handler for onclick or something

the issue "B" should be the dupe of bug 1022325, so we could track it there.
"A" would be a part of bug 1022325, as the button's size should be aligned to either before or after clicking

then, I'm not yet able to reproduce "C".
can you provide a testcase?

Comment 13

3 years ago
I agree for bug 1022325, and also for your remarks.

The only test case I suggested is to connect to my site ""

The correct size of buttons are shown on the attached image "dismark_site_under_Chrome.png".
The "dismark_site_under_Firefox.png" shows the differences.

If your connexion has the good appearance, you can't reproduce the bug.

Comment 14

3 years ago
Created attachment 8780104 [details]

Comment 15

3 years ago
Created attachment 8780106 [details]
sorry, I still don't understand the issue "C" in comment #12.

what actually you mean by "the action you want" in comment #11 ?
how can I reproduce the issue in ?
which button should I click and what's the action that should be executed by the button but isn't for first click?

Comment 17

3 years ago
"The action you want" means the PHP code written for the button.

This code is executed correctly, when you click and release.
The code is not executed when you click without release.

For resume the bug 1022325 is not complete in its description : 
"This is dependent on the : hover style" : YES, but also the original size is too big !

Do you think it is desirable I add this remark for bug 1022325 ?

Thank you for your help : I had not seen this bug was already notified.
1. which button?
2. how the PHP code is invoked from the page?
3. what do you mean with "click without release" ?
   where do you release the mouse button?

Comment 19

3 years ago
1 - The buttons are viewed on my site
2 - HTML code is invoked with such line : 
"<input type='button' value='Découvrir ...' class='bouton' onclick='location.href="Linux.php" ' />"
3 - "click without release" means you only push the mouse button : the aspect of the button on the page must change as described with the :hover. if you release the mouse no action is then executed.
ah, I see.
the size of the button is changed when you push down the mouse button, and the position of your cursor becomes outside of the button, and when you release the mouse button, onclick event isn't fired, right?
If so, this bug is totally a dupe of bug 1022325.

Comment 21

3 years ago
I agree.

I am going to follow the response for bug 1022325.

Thank you for your help
Last Resolved: 3 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 1022325
The size _change_ on click is bug 1022325.  But this bug is about the original (native themed) size being too big, no?

Did the OS theme just change from Ubuntu 15.10 to Ubuntu 16.04?
oops, I misunderstood that bug 1022325 covers it too.
Ever confirmed: true
Resolution: DUPLICATE → ---

Comment 26

3 years ago
And after ... the link you precise : solution is a patch ?
But how can I use this patch ? or it will be added in the future version of Firefox ?
Component: Untriaged → Widget: Gtk
Product: Firefox → Core
sorry, forgot to remove needinfo flag.
Flags: needinfo?(dismark)


3 years ago
Flags: needinfo?(twalker)
Flags: needinfo?(twalker)
Priority: -- → P4
Whiteboard: tpi:+

Comment 28

2 years ago
AS the bug is always present in the latest version (49) I use, is possible to obtain Firefox for Linux version 45 (I suppose it hasn't the bug) ?
Dismark,  yes, you can find that here:

Comment 30

2 years ago
Thank you very much, all my PHP∕HTML applications are OK with this version of Firefox.

Comment 31

2 years ago
In the last version of Firefox (54.0) the problem is always here.
I hope someone will find the solution, because my only solution is to use Firefox 45.0
You need to log in before you can comment on or make changes to this bug.