Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Popup with arrow display error on Android #7037

Closed
weeman1337 opened this Issue · 18 comments

3 participants

@weeman1337

Hello,

please have a look at the attached screenshot. There is a display error when using popups with an arrow on Android. The screenshot has been taken from the jqm demo page http://demos.jquerymobile.com/1.4.0/popup/. The display error appears at least on Android 4.3 using the system browser.

screenshot_2014-01-31-10-54-31

@gabrielschulhof
Collaborator

Does it happen with the latest source as well? http://view.jquerymobile.com/master/demos/popup/

@gabrielschulhof
Collaborator

That's actually kinda weird, because neither div comprising the arrow has those dimensions.

@weeman1337

It does also happen with the latest source. If I can do anything else to support you finding the error please let me know!

@gabrielschulhof
Collaborator

@uGoMobi if you have an Android 4.3 device, could you please check whether this is a rendering bug, or whether this is a CSS problem?

Actually, I think I know what it is. The arrow consists of two divs: The outer div is transformed 45° and the div inside it is transformed -45° and mirrored.

It looks like the outer div is not clipping the inner div.

@gabrielschulhof
Collaborator
 .ui-popup-container .ui-popup-arrow {
+    overflow: hidden;
     ...
 }

I'm curious if this'll do it ...

@gabrielschulhof
Collaborator

@weeman1337 can you please test http://view.jquerymobile.com/7037-popup-arrow-overflow/demos/popup/ and let us know if it still shows up?

@gabrielschulhof
Collaborator

OK ... I can reproduce the problem on browserstack with Android 4.2.

@gabrielschulhof
Collaborator

Interestingly, http://view.jquerymobile.com/master/demos/popup-arrow-size/ does not display the artifact.

@gabrielschulhof
Collaborator

@weeman1337, the background div is causing it.

You can work around the problem by doing this:

$.mobile.document.on( "popupcreate", function() {
  $( ".ui-popup-arrow-background" ).remove();
});

... but then you lose support for funky backgrounds - which the default 1.4.0 theme doesn't have, but which 1.3.2 has.

@gabrielschulhof
Collaborator

http://jsbin.com/IFolanOW/136/ illustrates the hack.

@gabrielschulhof
Collaborator

Well, I guess it's enough to hide the div instead of removing it:

.ui-popup-arrow-background {
  display: none;
}
@gabrielschulhof
Collaborator

@uGoMobi this is a crappy workaround. It would be really nice to find out if there is some weird -webkit- thing we can set to avoid this ...

@gabrielschulhof
Collaborator

http://jsbin.com/uGoZOYe/1/ illustrates the basic problem.

@gabrielschulhof
Collaborator

This looks like a rendering bug :( Not sure if we can fix this.

@weeman1337

The hack

.ui-popup-arrow-background {
  display: none;
}

works for me.

@arschmitz arschmitz reopened this
@arschmitz
Owner

@gabrielschulhof from what you say this is only an issue if trying to support 1.3 backgrounds which we should not be doing in 1.4 so why dont remove these and actually fix the issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.