Skip to content

/ servo

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Text within input with box-sizing: border-box is not positioned correctly #11528

Open
ocerman opened this issue May 31, 2016 · 13 comments
Open

Text within input with box-sizing: border-box is not positioned correctly #11528

ocerman opened this issue May 31, 2016 · 13 comments
Labels
A-layout/inline C-has-manual-testcase C-reproduced

Comments

@ocerman
Copy link

@ocerman ocerman commented May 31, 2016

itext

<!doctype html>
<html><body>
    <input placeholder="Enter your mail" type="text" style="padding:0.5em; height: 2.2em; box-sizing: border-box;">
</body></html>
@ocerman ocerman changed the title Text within input with box-sizing: border-box is not positioned correctly Input with box-sizing: border-box have wrong size May 31, 2016
@jdm
Copy link
Member

@jdm jdm commented May 31, 2016

It's not yet clear to me whether this is another instance of our form-related CSS rules not overriding enough properties, or whether this is a bug in our layout implementation.
@ocerman
Copy link
Author

@ocerman ocerman commented May 31, 2016

Ok, it seems like there are 2 issues:

  1. text have different size, that's why box is smaller. When font-size is specified, box have correct size (compared to Firefox and another browsers.)

  2. text within box is not positioned correctly

fz

I will rename this issue to original name - that's describing 2), which seems to be core of this problem.
Should I create separate issue for 1)?
@ocerman ocerman changed the title Input with box-sizing: border-box have wrong size Text within input with box-sizing: border-box is not positioned correctly May 31, 2016
@jdm
Copy link
Member

@jdm jdm commented May 31, 2016

Please do!
@mskrzypkows
Copy link

@mskrzypkows mskrzypkows commented Jun 1, 2016

It's strange, in my FF (46.0.1v) on Ubuntu, text is displayed as in Servo. Is text position wrong here? Maybe it depends on used font.
ff_ubuntu
@ocerman
Copy link
Author

@ocerman ocerman commented Jun 1, 2016

That's strange. I've tested that on multiple browsers in Windows (including FF 46.0.1) and they render that like on the first picture.
win

I don't think it's font-related, because it's rendered differently even when you specify font-family and font-size.

@mskrzypkows Can you try how FF on Ubuntu render something like this?
<input placeholder="Enter your mail" type="text" style="padding:1em; height: 10em; box-sizing: border-box; width: 20em; font-size: 1em; font-family: Arial;">
On Windows it looks like this:
t2
@mskrzypkows
Copy link

@mskrzypkows mskrzypkows commented Jun 1, 2016 •
edited

You're right, it seems that text position is wrong. I suppose that in the first example, text is cut because of native Ubuntu control.
ff_ubuntu
@mskrzypkows
Copy link

@mskrzypkows mskrzypkows commented Jun 8, 2016

@jdm I can investigate the issue, could you give me some hint, in which area should I look for rendering label of input?
@jdm
Copy link
Member

@jdm jdm commented Jun 8, 2016

The actual text content is derived from ServoThreadSafeLayoutNode::text_content() in components/layout/wrapper.rs. That's invoked from FlowConstructor::create_fragments_for_node_text_content in components/layout/construct.rs. There are rendering rules for text inputs in resources/servo.css that will apply here as well.
@jdm
Copy link
Member

@jdm jdm commented Jun 8, 2016

Also resources/quirks-mode.css has a rule that may apply depending on the testcase; I forget when quirks mode is applied.
@mskrzypkows
Copy link

@mskrzypkows mskrzypkows commented Jul 13, 2016 •
edited

The style: https://github.com/servo/servo/blob/master/resources/servo.css#L46 doesn't work. I've checked in FF, there is text always centred vertical in input. Maybe we need to add some special centering for inputs? I need some more help, I've checked mentioned files but cannot find rendering of input label. @jdm are there any other locations which you suspect of causing the bug?
@stshine
Copy link
Contributor

@stshine stshine commented Apr 6, 2017

@highfive: assign me
@highfive highfive added the C-assigned label Apr 6, 2017
@highfive
Copy link

@highfive highfive commented Apr 6, 2017

Hey @stshine! Thanks for your interest in working on this issue. It's now assigned to you!
@nox
Copy link
Member

@nox nox commented Oct 1, 2017 •
edited

Looks better now but still not perfect:

capture d ecran 2017-10-01 a 18 15 50
@nox nox added the C-reproduced label Oct 1, 2017
@jdm jdm removed the C-assigned label Oct 1, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
A-layout/inline C-has-manual-testcase C-reproduced
Projects
None yet
Milestone
No milestone
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
6 participants
@jdm @nox @stshine @highfive @ocerman @mskrzypkows
You can’t perform that action at this time.