dropdown's backdrop mislplaced when under translate-d element

zowers
创建于
2014-08-13 09:21:57

when a dropdown's parent has -webkit-transform:translate() then the backdrop becomes positioned relative to the translate-d parent.

10条回答
zowers
回复于
2014-08-13 09:23:42
#1

due to the fact that transform creates new coordinate system, so position:fixed is relative to the new system.
http://stackoverflow.com/a/15256339/142561

cvrebert
回复于
2014-08-13 15:21:10
#2

Do you have a pure-Bootstrap example of this happening? Are you seeing it with dropdowns in modals or something?

zowers
回复于
2014-08-13 16:29:36
#3

I can extract an example, but generally it's just a -webkit-transform: translate(100px,100px); on a parent;

I use IScroll library (http://cubiq.org/iscroll-5) which implements the scrolling using translate()

mdo
回复于
2014-08-13 16:32:59
#4

The dropdown backdrop only appears on mobile and we need it there to dismiss dropdowns on taps outside the menu. Probably not much we can do here honestly.

zowers
回复于
2014-08-13 19:38:25
#5

only appears on mobile

that's huge market

not much we can do

  • backdrop can be moved up to the body level
  • the element can be customizable through an option
  • backdrop's size can be made bigger, so it covers the whole screen
zowers
回复于
2014-08-13 19:53:50
#6
mdo
回复于
2014-08-23 20:53:32
#7

There might be a solution here, but I'd need @fat's opinion.

only appears on mobile

that's huge market

I wasn't attempting to downplay or dismiss the bug. I'm simply informing you and potential future readers of the purpose of the backdrop.

not much we can do

  • backdrop can be moved up to the body level
  • the element can be customizable through an option
  • backdrop's size can be made bigger, so it covers the whole screen

The backdrop can't simply be moved, I think, as our dropdown menus don't appear outside the normal document flow (they are nested within the immediate parent). There's not really any option to add here either since we can't really change that without breaking some aspect of the behavior or code for v3.x. And the backdrop can't simply be made larger as it's bound by the parent.

mdo
回复于
2014-08-23 20:53:56
#8

Adding the JS label to see if this is doable in v3.

fat
回复于
2014-08-28 00:36:08
#9

translates create new stacking contexts… there's no way for us to elegantly work around that. sorry

zowers
回复于
2014-08-28 07:26:21
#10

the workaround for others affected:

.dropdown-backdrop {
    .scale( 20, 20 );
}
当前位于第1页,总计10 条回复

推荐相似问题

input type=file wrong draw into browsers

file type wrong render to fix need add .form-control[type="file"]{ height: auto; }
讨论数 7
bootstrap
创建时间:2014-08-13 08:09:41

require bootstrap in node via npm not working

var $ = require('jquery'); require('bootstrap/dist/js/bootstrap'); Results in the error: Error: Bootstrap's JavaScript r
讨论数 2
bootstrap
创建时间:2014-08-13 02:41:18

Bootstrap-theme.css: Navbar .dropdown-menu > .active color overwritten. (width < 769px).

Reproduce issue: Open http://jsbin.com/vavoqililuro/1. Make sure that the width of the screen is less than 768px (@grid-
讨论数 5
bootstrap
创建时间:2014-08-12 23:01:26

Disabled cursor is not variable

In our project, our UX/XD team has decided that the not-allowed cursor for disabled items (buttons, checkboxes, etc.) is
讨论数 2
bootstrap
创建时间:2014-08-12 21:12:52

Button.prototype.toggle not triggering change event on Angular Model

Angular model doesn't seem to trigger the change event if radio buttons are used with angular model as such. <div class=
讨论数 5
bootstrap
创建时间:2014-08-12 13:21:31

button dropdowns overflowing screen on mobile

Hi When clicking on a button dropdown which is located close to the right side (RHS) of the screen, the dropdown overflo
讨论数 9
bootstrap
创建时间:2014-08-12 12:34:34

Tooltip occasionally won't hide when using a hide delay

JS Fiddle http://jsfiddle.net/d45cc0rs/ Problem After setting a hide delay on the tooltip component, when moving the cur
讨论数 3
bootstrap
创建时间:2014-08-12 10:01:42

Button and dropdown text doesn't display directly in Google Chrome

When i was testing some Bootstrap components in Chrome, the label in the button is not displayed on the page load direct
讨论数 6
bootstrap
创建时间:2014-08-12 09:59:39

www.getbootstrap.com's Own Tweet Button Isn't Being Rendered

This is on Firefox31, the latest, running on an old WindowsXP machine (sorry about that). I'm talking about the little T
讨论数 2
bootstrap
创建时间:2014-08-12 02:58:39

<a> tags are incorrectly highlighted when not links

Bootstrap 3 misleadingly applies color and hover behaviors to anchor tags, i.e. those with this form: <a name="i-am-not-
讨论数 3
bootstrap
创建时间:2014-08-11 22:01:59