Question 259833 in CSS Question posted in
Some basic documentation can be found here.

Css – android chrome shadow content height

I am encountering an issue in the Android Chrome browser on a mobile phone.

The input type ‘text’ has a height of 52px, a font size of 15px, and a line height of 21px. However, the shadow content height remains at 17.7px. Shouldn’t it be 21px to match the line height?

I need to ensure that the content height doesn’t vary when a user pastes an emoji. Currently, the input content jerks when a user pastes an emoji into the input field. The reason for this jerking is that the shadow DOM height increases by 1px. If I simply set the shadow height to 21px, this jerking will stop. How can I achieve this?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    using box-sizing: content-box on an input and then setting line height solved the bug. Also had to remove input height as well.


  2. 0

    2 potential ways to fix it

    by using overflow-y: hidden;

    input {
  height: 52px;
  font-size: 15px;
  line-height: 21px;
  overflow-y: hidden;
}

    another by using line-height: normal;

    input {
  height: 52px;
  font-size: 15px;
  line-height: normal;
}

    remember to change selector to target only the specific input element

    As potential as it is, but it should still prevent the jerking when pasting emojis.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search