1

I am showing a message on my website with the following style:

.basic-message {
  position:fixed;
  top:3%;
  right:3%;
  z-index: 1000;
  cursor: pointer;
}

it works fine in Desktop browsers, see the screenshot

enter image description here

or try it yourself.

but it does not work in mobile Chrome on Android where the message is positioned at the top-right corner of the page (but not window) as if its positions is 'absolute'.

Looks like it is a known problem and I successfully tried adding the meta tag:

    <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi">

this makes 'fixed' work well as on Desktop, but also makes the website unscalable that is unacceptable.

Also I tried adding 

-webkit-backface-visibility: hidden;

but it does not take an effect (at least on my Android phone).

Is there some other solutions or workarounds?

EDIT1:

The message itself is absolutely trivial:

.basic-message p {
  color: #ffffff;
  font-size: 1.4rem;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  border-radius: 0.25em;
  padding: 16px;
}
.error-message p {
  background: #e94b35;
}

    <div class="basic-message error-message">
            <p>The text goes here.</p>
    </div>

Also, for example, this page has a sample 'fixed' element at the right-bottom corner of the window that stops working correctly in mobile Chrome after scaling the page.

EDIT2:

Adding -webkit-transform along with -webkit-backface-visibility as follows

.basic-message {
  position:fixed;
  top:3%;
  right:3%;
  z-index: 1000;
  cursor: pointer;
  -webkit-transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
}

also does not take an effect.

EDIT3

In MS Edge mobile emulator it also glitches, see the screenshots below:

enter image description here

it jumps and periodically disappears when I scroll the page:

enter image description here

Dmitriano
  • 1,878
  • 13
  • 29
  • Can you add a sample of the code here – Viira Oct 20 '18 at 12:23
  • @Viira see EDIT1 in the post, or try it on my website https://developernote.com/contact/ (fill all, but leave captcha unchecked and press Send). – Dmitriano Oct 20 '18 at 12:40
  • Possible duplicate of [Webkit backface visibility not working](https://stackoverflow.com/questions/7455502/webkit-backface-visibility-not-working) – Andre Figueiredo Oct 20 '18 at 12:50
  • @AndreFigueiredo tried -webkit-transform, but it does not help, see EDIT2. – Dmitriano Oct 20 '18 at 13:04
  • i checked your form in android. there is no problem. message is shown in right and top of page ( DOM ). when you zoom in android browser you're not changing window size . you just zoom on the elements ( this is different in desktop ) – Zoha Oct 20 '18 at 13:37
  • @Zoha Yes, I see, but what is the logic behind this? For example this http://learnlayout.com/position.html partially works (fixed' element at the right-bottom corner of the window), but stops working after scaling. It is interesting that my message is also partially works (sometimes it works correctly, and sometimes not, it is not all the time at right-top of the page, but sometimes it moves.) – Dmitriano Oct 20 '18 at 13:49
  • @Dmitriano i don't see any difference between that page and your page . both are the same . i try it in android chrome browser – Zoha Oct 20 '18 at 13:58
  • @Zoha yes, they both are glitching. – Dmitriano Oct 20 '18 at 14:10

1 Answers1

0

Seems strange. Try to find out why the property position is overridden to the absolute value. Check where in the CSS and how many times is set using the inspector. It should not be changed to absolute but remain fixed.

  • it is fixed, but the mobile browser interprets it as absolute. – Dmitriano Oct 20 '18 at 13:46
  • Please, emulate your phone (https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide/emulation#display) and check the property. Can you post a screenshot of that? –  Oct 20 '18 at 13:50
  • see EDIT3, it also glitches in MS Edge emulator. Looks like all mobile browsers cannot handle 'fixed' correctly. – Dmitriano Oct 20 '18 at 14:09
  • Fixed may be handled correctly. I suggest You add and review the viewport meta tag following this tutorial, use what he uses. https://css-tricks.com/snippets/html/responsive-meta-tag/ - Actually I don't see it in your website. –  Oct 20 '18 at 14:36
  • Unfortunately adding does not help. See my post after 'I successfully tried adding the meta tag'... – Dmitriano Oct 20 '18 at 14:48
  • I added – Dmitriano Oct 20 '18 at 14:55
  • – Dmitriano Oct 20 '18 at 15:01
  • @Dmitriano by my side seems works https://snag.gy/NTlBtm.jpg. I noticed a strange style tag, see the screenshot. Anyway, a solution should be to not fix the message and put it near the captcha. –  Oct 20 '18 at 15:02
  • Strange, but I have this https://slogpost.ru/wp-content/gallery/images1/lumia1.png the sidebar overlaps the form. Try switch portrait/landscape or scale. But 'fixed' works better. – Dmitriano Oct 20 '18 at 15:09
  • I have an impression that the emulator itself is glitching a bit. – Dmitriano Oct 20 '18 at 15:12
  • I've never tried to scale and deal with fixed. I need to searching somewhere. I find a solution I'll write here. –  Oct 20 '18 at 15:13
  • @DmitrianoI0ve tried with my phone. If You scale you change the viewport and the top and right reference for fixed position. To prove that, try to scale but really really not too much. You see the message is fixed but cut. So I think there is no error but simply fixed is not referred to the Windows itself but the viewport object that is a concept, a rectangle, not the real screen. –  Oct 20 '18 at 15:25
  • I noticed that when I scroll in Chrome on Android the address bar can move, so probably the browser window is moved, but not the content is scrolled inside the browser window (and the reference point is moved with it). Saying more exactly if the content is moved 'fixed' works, but if the window is moved it does not. – Dmitriano Oct 20 '18 at 15:50
  • It is not 'fixed' glitches, simply the browser window moves out of the screen. But this means that the browser application works incorrectly. – Dmitriano Oct 20 '18 at 15:54
  • Probably we can say that on mobile 'fixed' works correctly relative to the browser window, but not relative to the screen. – Dmitriano Oct 20 '18 at 16:01
  • Exacly. Go deep into the viewport concept. Try to look at MDN. –  Oct 20 '18 at 16:03