Why does mobile chrome scale and position some elements incorrectly?

Question

HTML

If the page has a tag and its content like this:

<meta name="viewport" content="width=device-width, initial-width=1.0"/>

then the browser scales the page on a mobile device.
But in chrome on mobile android, if you add, for example, a button with a fixed position at the bottom, and the page does not fit in width (for example, if there is a long table), then the button leaves the screen (it feels like it leaves in such a way as to maintain the proportions of the document ).
Example

spoiler

If you add
user-scalable=no
it, the button is displayed as needed, but, accordingly, the scaling will disappear.
Example

spoiler

There is no such problem in mobile firefox.
Why is this happening and how is it right to win?

Answer 1

Prevent horizontal scrolling for the entire page on the mobile version.
For tables, you can use a container with a scroll.
Read the article about tables in responsive design .
There are ready made solutions.