3

The bootstrap Modal dialogs are rendering like this in Safari 6

enter image description here

Is this an issue with Safari or the Bootstrap framework?

Nippysaurus
  • 20,110
  • 21
  • 77
  • 129
  • Could you do this up in a JSFiddle or JSBin demo? I'm not seeing the same problem in Chrome, but I'm not sure that my example has parity with yours. – merv Oct 06 '12 at 17:25

1 Answers1

1

Since you've not mentioned that what exactly is the rendering issue with safari I assume the blue outline you are talking about

So I guess safari is using it's default outline for your focused modal window

Use CSS

First simply try this :

.yourmodalcontainer {
   outline: 0px;
}

If still not succeeded try the following..

.yourmodalcontainer:focus {
   outline: 0px;
}

for your modal window..this should be than fixed..

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
  • Don't forget to read the text of the image. ;) Also, FYI on the outline issue, that is considered a Bootstrap issue and it is slated be fixed in 2.1.2, which should be out next week. – merv Oct 06 '12 at 17:29
  • thats easy to set `overflow-y: scroll;` – Mr. Alien Oct 06 '12 at 19:11
  • @merv Thank you :) good to know its going to be fixed ... I'll simply wait for their fix instead oh patching it myself. Thank you both for your feedback :) – Nippysaurus Oct 07 '12 at 03:17
  • PS. marking as answer because the supplied css does remove the border for now. – Nippysaurus Oct 07 '12 at 03:19
  • @Nippysaurus it is a correct way to remove it, and btw that's an outline and not a border, it does not take any space in the box model ;) – Mr. Alien Oct 07 '12 at 05:15