The iPhone 6 Plus's Safari browser, when in landscape mode, displays multiple tabs open at once. Additionally, when a Bootstrap modal

Encountering an issue with the bootstrap modal on iPhone Safari 6+ in landscape mode. This glitch only happens when using multiple tabs on the browser.

Follow these steps to replicate the problem:
1) Visit http://getbootstrap.com/javascript/ on your iPhone 6+ in landscape mode - make sure to have multiple tabs open
2) Scroll down and click on the "Small Modal" button in the Optional size section.
3) The modal will briefly appear and disappear, leaving a grey background. No further interactions are possible.
4) Attempt to hide the navigation and tab bars by scrolling up, which should reveal the bootstrap modal. However, this workaround doesn't function when multiple tabs are open.

Initial investigation suggests the issue may lie within the .modal-open CSS styling:

.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
 }

A solution is needed for this problem. Any suggestions or ideas?

csstwitter-bootstrapmobile-safariiphone-6-plus

Answer №1

Unfortunately, I missed the opportunity to provide an answer initially. However, for those encountering a similar issue to what I faced, I have devised a workaround.

The root of the problem lies in a bug within Bootstrap, specifically pertaining to the multi-tab functionality on iPhone 6+ devices.

You can find more details about this bug by following this reference link: 

https://github.com/twbs/bootstrap/issues/18859

In my case, I was determined to find a solution. Therefore, I decided to make some adjustments to my style sheet, and fortunately, this approach proved effective for resolving the issue. Hopefully, others experiencing the same challenge will benefit from my experience.

 /* Fix for iPhone 6+ multitab issue */
    .modal {
        position: absolute;
        top: 0;
    }

By making these simple changes to my style sheet, I was able to overcome the problem – despite not being an expert in CSS or style sheets. Sometimes, all it takes is a small tweak to achieve success.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When the sidebar is set to position: fixed, the icons magically vanish

This CSS is specifically for the side navigation bar. .side-nav { // position: sticky; top: 0; left: 0; height: 100vh; z-index: 100; width: calc(3.5vw + 3.5vh); // position: fixed; &.content { height: 100%; display: flex; fl ...

csssass

Triggering a specific outcome with every user interaction involving the selection of an element

How can I trigger this effect each time the user clicks on the element using jQuery? I have added a "ripple" class upon clicking, but when I click on the element for the second time, the effect does not execute because the class has already been added. Ho ...

jqueryhtmlcss

Adjust the background color of the header as you scroll

Seeking assistance in adjusting the background color of my header upon scrolling. This is my current implementation: header.component.ts export class HeaderComponent { ngOnInit(): void { const header = document.querySelector('.header'); ...

cssangulartypescript

Implementing event handling with .On() in Jquery following .Off()

I need assistance with my responsive navigation bar. I am having trouble with the jQuery code to disable hover events if the width is less than or equal to 768px and enable it for desktop screens. $(window).on('load resize', function (e) { v ...

javascriptjquerycssunbind

Prestashop 1.7 - Enhanced top menu navigation with drop-down subcategories

While using the ps_mainmenu top menu with the default Prestashop theme, I noticed that the drop-down menu only works for parent categories and not subcategories. You can see this in the attached image and HTML code from Chrome. I'm looking for a way t ...

phphtmlcssbootstrap-4prestashop

JavaScript code that moves the active link to the top of the navigation when the window width is less than or equal to 800px

I'm working on a responsive navigation that is fixed at the top and switches from horizontal to vertical when the screen size is less than or equal to 800 pixels wide. However, I'm facing an issue with moving the active link to the top of the na ...

javascripthtmlcssnavigationresponsive

What could be the reason for my user input not being captured and saved as variable data on the HTML webpage?

Here is the code I am working with: var g = document.getElementById("al").value; function start() { document.getElementById("test2").innerHTML = typeof(g) + parseFloat(g); } <p id="test2">Output will be displayed here:</p> <form> ...

javascripthtmlcss

How can you transfer data from a jQuery function to a designated div element?

I'm struggling to transfer data from a function to a specific div, but I can't seem to make it work. I'm in the process of creating a gallery viewer and all I want is to pass the counter variable, which I use to display images, and the total ...

javascriptjqueryhtmlcss

Is there a way to customize the font size of Material UI Autocomplete?

I'm currently trying to customize the Material UI Autocomplete component with my own CSS. Specifically, I aim to adjust the font size of the input field. Below is my current implementation: <Autocomplete style={{ width: 200, height: 60, ...

cssreactjsmaterial-ui

JSX: dynamically include element based on condition

I am currently utilizing Bootstrap 3 and I have a requirement to clear each .row once 12 columns have been generated. However, my code is not working as expected and I encounter this error: Failed to compile. Error in ./src/File/file.js Syntax error: Unex ...

twitter-bootstraptwitter-bootstrap-3reactjs

Tips for creating a hidden tab that only appears when hovered over

When hovering over the link tag .cat-link a.navlink, each subcategory tab .subcategories div is displayed. However, I would like to hide all tabs initially and have them appear only when hovered over with the mouse. Once the mouse is removed, I want the t ...

javascriptjqueryhtmlcss

`Enhancing the appearance of code in PHP`

I'm struggling with customizing the data pulled from the database. Can anyone provide assistance? I attempted to define $style within the while loop and assign it to $questions, but nothing is displaying on the webpage. While I have some familiarity w ...

phphtmlmysqlcssstyles

Using the Position Sticky feature in Next.js

As a newcomer to sticky elements, I decided to implement a sticky sidebar in my project. Unfortunately, after copying and pasting some code snippets related to sticky sidebars, it seems that the functionality is not working as expected. <Layout title= ...

javascriptcssnext.jssticky

CSS Float behaving unexpectedly

body { margin: 0; font-family: arial; line-height: 16px; } #topbar { background-color: #600c0c; width: 100%; height: 46px; color: white; margin: 0; } .fixedwidth { width: 1050px; margin: 0 auto; } #logodiv { padding-t ...

htmlcsscss-float

CSS: How come this inline-block div is not appearing on the same line as intended?

I've been tinkering with using display:inline-block on my div elements, and I'm puzzled as to why my two inner divs aren't appearing on the same line. Both divs have a width of 200px, while their parent div is set at 400px. If I switch the ...

css

Halt the Changing of Button and Typography Styles with React Router and MUI

I am currently working on a component that I want to make clickable. However, when I wrap them in a <Link> element (from react-router-dom) or set component={Link} to="" on them, all the text inside them automatically becomes hyperlinks. For ...

cssreactjsmaterial-ui

The active class consistently adds new menu options without removing the previous ones

I am facing an issue with my menu where the active class does not get added to the new menu item when clicked, despite being removed from the previous item. Below is the code snippet: <div class="row text-center" id="side-menu"> <nav> ...

jqueryhtmlcssnavigation

Ways to present a pop-up dialog box featuring word corrections

I have developed a word correction extension that encloses the incorrect word in a span element. Upon hovering over the word, a drop-down menu with possible corrections should be displayed. However, my current code is not functioning properly. How can I en ...

javascripthtmlcsspopup

Develop an XML document that includes CSS and DTD seamlessly incorporated

Could someone please provide me with a short code example of an XML file that includes both a DTD and CSS styles all in one file? Just need one element as an example. I'm new to XML and can't seem to find any examples with both XML and CSS comb ...

htmlcssxmlxhtmldtd

What is the best approach for implementing a CSS reset across multiple websites with different content?

As I work on a page that will be displayed across numerous websites beyond my control, shown within a jQuery UI dialog window using $.load(), the content is vulnerable to the CSS directives set by each individual site. To prevent conflicts, I have made sur ...

css