Media query with position absolute and inline-block, doesn't seem to apply on Chrome

Question

Can someone give me a clue about this weird behaviour?

1. When the browser is wide, we have a hint on the right side of a form field. This is Ok.
2. When we narrow the viewport the hint gets to the bottom as it should.
3. When we try to re-scale the viewport to be wide again, the hint text overlaps other elements, instead of going to it's original position as intended.

Chrome V.46 on Mac OS 10.

Step 1 - The browser is wide open - Hint text is on the right side

Step 2 - If we narrow the viewport, the hint moves to bottom. OK.

Step 3 - When we try to resize the browser window, the hint doesn't follow is position:

Step 4 - This is how the inspector looks like when the hint ignores the input field position:

Step 5 - I then uncheck the "position absolute" on the inspector window, and it stays like this:

Step 6 - Finally, I check that same checkbox, and it goes to the appropriate position.

As anyone had a similar issue before?

I've tried to reproduce this on a Fiddle, using the same rules, not just the exact same elements for obvious reasons, but it seems to work there: https://jsfiddle.net/5m04na1u/1/

<div>Lets imagine I'm a form element wrapper</div>
<p class="hint-block">I'm a hint text block</p>

div {
    position: relative;
    width: 100px;
}

.hint-block {
    display: block;
    color: blue;
}

        @media screen and (min-width : 56.25em) {
            .hint-block {
                position: absolute;
                display: inline-block;
                color: red;
            }
        }

Again, this is a Chrome only issue. Tried on other browsers and it worked well. But 99% of the time is my fault so, and even if it's not, I still have to fix this somehow.

Any clue or suggestion?

Update: Here's a live code sample: Sorry. I had to remove the link, because the product is not yet live, and the client had is concerns expressed.

Answer 1

My suggestion is:

• Remove position: absolute from help block
• Add vertical-align: middle to help block

Work like a charm for me

Answer 2

Adding left: 400px to @media screen and (min-width: 56.25em) #checkoutform-email+.hint-block solves the layout issue, but not the root of the problem.

I believe this should be considered a browser issue. Since it calculates the initial left of the absolute element considering the width of its siblings.. After re-sizing the window, a layout happens and it won't consider the siblings width again, overlapping the inner contents..

Answer 3

You don't need the position absolute. Remove it and it works automatically.

Answer 4

What about making a div, where you can put your input? i think it should work