Education / reminder popups rendering incorrectly on mobile


#1

On mobile, if a popup comes up, it looks like the site is broken.

All these photos are on iPhone 4S with Safari. (Androids were the same.)

I tried with simple CSS display: none; but I failed. (Perhaps I put wrong CSS indicators?)

How can I solve this? :disappointed_relieved:

If I can disable these kind of popups on mobile specifically, that would be nice. (Then what about tablets?)


Plus, I wanted to know how it looks on mobile Chrome.
So I tried with the latest Chrome mobile on iPhone 4S.

Then I realized that it was really hard to use Discourse with it.
Can’t click properly, Can’t type properly.
Tried to type contents and something weird happened.
It seemed like keyboard shortcut activated.


#2

For now, I will try with educate until posts to 0.

Because, very new users, if they see these broken education popups at the beginning, I don’t think they will trust my site. Even really cool features exist in Discourse.

  • However, will it disable education for post & reply both?
  • There is Similar topics popup remains still. They will face this soon or later on mobile.
  • Any other composer pop ups left beside educations and similar topics?

(Sam Saffron) #3

Regardless this is a styling bug we should fix cc @awesomerobot


(Jeff Atwood) #4

Someone added a hard-coded inline display: block CSS style here which is causing a problem:

<div id="ember2170" class="ember-view composer-popup hidden" style="bottom: 270px; display: block;">

That is overriding the display: none that we have on .composer-popup.

So we can either add !important or fix the inline CSS. This is pretty bad so for now I’ll add !important but that inline style (I think added via JS?) needs to die @sam.


#5

So… Are you guys going to disable it on mobile? or make it displayed properly?


(Jeff Atwood) #6

It should already be fixed on try and meta… give it a shot.


#7

Yes. The pop ups gone!! :+1:

But still this problem exist with mobile Chrome on iPhone(Couldn’t check on Andorid yet):

One of those problem with Chrome looks like this:


(Alessio Fattorini) #8

With android and chrome is gone


(Jeff Atwood) #9

Chrome on iOS is very quirky. We only officially support the native mobile browser.


(Jeff Atwood) #10