New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Popup with arrow display error on Android #7037

Closed
weeman1337 opened this Issue Jan 31, 2014 · 18 comments

Comments

Projects
None yet
3 participants
@weeman1337

weeman1337 commented Jan 31, 2014

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

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 31, 2014

Contributor

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

Contributor

gabrielschulhof commented Jan 31, 2014

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

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 31, 2014

Contributor

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

Contributor

gabrielschulhof commented Jan 31, 2014

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

@weeman1337

This comment has been minimized.

Show comment
Hide comment
@weeman1337

weeman1337 Jan 31, 2014

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

weeman1337 commented Jan 31, 2014

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

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 31, 2014

Contributor

@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.

Contributor

gabrielschulhof commented Jan 31, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 31, 2014

Contributor
 .ui-popup-container .ui-popup-arrow {
+    overflow: hidden;
     ...
 }

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

Contributor

gabrielschulhof commented Jan 31, 2014

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

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

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 31, 2014

Contributor

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

Contributor

gabrielschulhof commented Jan 31, 2014

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

@weeman1337

This comment has been minimized.

Show comment
Hide comment

weeman1337 commented Jan 31, 2014

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 31, 2014

Contributor

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

Contributor

gabrielschulhof commented Jan 31, 2014

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

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 31, 2014

Contributor

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

Contributor

gabrielschulhof commented Jan 31, 2014

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

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 31, 2014

Contributor

@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.

Contributor

gabrielschulhof commented Jan 31, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 31, 2014

Contributor

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

Contributor

gabrielschulhof commented Jan 31, 2014

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

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 31, 2014

Contributor

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

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

gabrielschulhof commented Jan 31, 2014

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

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

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 31, 2014

Contributor

@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 ...

Contributor

gabrielschulhof commented Jan 31, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 31, 2014

Contributor

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

Contributor

gabrielschulhof commented Jan 31, 2014

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

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Jan 31, 2014

Contributor

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

Contributor

gabrielschulhof commented Jan 31, 2014

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

@gabrielschulhof

This comment has been minimized.

Show comment
Hide comment
@weeman1337

This comment has been minimized.

Show comment
Hide comment
@weeman1337

weeman1337 Jan 31, 2014

The hack

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

works for me.

weeman1337 commented Jan 31, 2014

The hack

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

works for me.

@arschmitz arschmitz reopened this Feb 1, 2014

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Feb 1, 2014

Member

@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?

Member

arschmitz commented Feb 1, 2014

@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