Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>This bug has been reported allready, and it seems the stance is that safari for windows simply is not supported by bootstrap.</p> <p><a href="https://github.com/twitter/bootstrap/issues/5644" rel="nofollow">https://github.com/twitter/bootstrap/issues/5644</a></p> <p>Furthermore this bug only seems to occur on windows version of safari.</p> <p>If you can not live with this bug, try targeting safari, but make sure you test it on both win and mac, so you dont fix it on win but break it on mac.</p> <p>Ways to target safari:</p> <p>Adding an extra # will only be read by safari (very hacky)</p> <pre><code>##id {width:100px;} </code></pre> <p>How to target only Windows Agents with js:</p> <pre><code>if (navigator.appVersion.indexOf("Mac")!=-1) { } else { $('body').addClass('win'); } </code></pre> <p>This will add the class win to body, if the user uses windows.</p> <p>After that you can target safari with css:</p> <pre><code>@media screen and (-webkit-min-device-pixel-ratio:0) { .win { height: 100%; } } </code></pre> <p>The result is, you will be only targeting safari on windows.</p> <p>After that you just need to adjust, whatever is causing the issue.</p> <p>Most likely it is padding or margin on the button element, or maybe width. Try playing with these, if nothing else helps relative position or even a negative margin might help.</p> <p>Relevant HTML from bootstrap:</p> <pre><code>&lt;!-- /btn-group --&gt; &lt;div class="btn-group"&gt; &lt;button class="btn btn-primary"&gt;Action&lt;/button&gt; &lt;button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"&gt;&lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt; &lt;ul class="dropdown-menu"&gt; &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt; &lt;li class="divider"&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;&lt;!-- /btn-group --&gt; </code></pre> <p>If you want to target dropdown menu use:</p> <pre><code>@media screen and (-webkit-min-device-pixel-ratio:0) { .win .dropdown-menu { height: 100%; } } </code></pre> <p>Now you can hack away!</p> <p>Or, simply dont support safari on windows :)</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload