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

Obtaining rotate3d values using JavaScript / jQuery

When dealing with an element that has a transformation like the following: style="transform: rotate3d(1, 0, 0, -50deg);" I am looking to extract the value -50 using Javascript or jQuery. It's essential for me to get the absolute value, so negative d ...

javascriptjquerycsscss-transformsrotatetransform

Adjust the dimensions of input tag depending on the length of content in Angular

Is there a way to dynamically set the size of the input tag in my HTML based on the length of the ng-model value? I attempted this approach: <span>Node Path: <input for="nodeName" type="text" ng-model="nodePath" size="{{nodePath.length()}}"ng- ...

javascripthtmlcssangularjs

The hover effect on MUI TableRows is being overshadowed by the background color of the TableCell

I'm currently using @mui/material version ^5.10.1. My challenge is applying the TableRow hover behavior as outlined in the documentation. However, I have also set a background color for the first TableCell in each row, which ends up overriding the ho ...

cssreactjsmaterial-uihovertablerow

A dynamic image carousel featuring multiple images can be enhanced with fluid movement upon a flick of

I am trying to enhance this image slider in HTML and CSS to achieve the following objectives: 1. Eliminate the scroll bar 2. Implement swipe functionality with mouse flick (should work on mobile devices as well) 3. Make the images clickable .slider{ ove ...

javascripthtmlcss

Updating Text within a Label with jQuery

Seeking assistance with a jQuery issue that I am struggling to resolve due to my limited experience. Despite attempting to search for solutions online, I have been unable to find an alternative function or determine if I am implementing the current one inc ...

javascripthtmljquerycssfunction

Safari: The onbeforeunload event

Welcome! To experience the Leave | Stay confirmation box on your page, please make sure you are using Safari 10. I am currently facing an issue with getting the confirmation box to display properly across different browsers. To begin, please visit and l ...

javascriptjqueryhtmlcsssafari

Could someone please clarify a specific aspect of how floats work?

Could someone simplify this explanation for me? A float is positioned next to a line box if there is a vertical space that meets these conditions: (a) at or below the top of the line box, (b) at or above the bottom of the line box, (c) below the top margi ...

cssspecifications

Using inline CSS to apply conditional styles to a component in React is a great way to customize the

I'm currently working on customizing the styles of some buttons depending on their 'active' status and whether the user is hovering over them. So far, it's partially working but I'm encountering behavior that I can't fully com ...

javascriptcssreactjsmaterial-ui

Problem with the overflow setting of a specific div

My website is currently hosted on a test server at medexcel.comeze.com. However, I am encountering an issue where the overflow of the top div is no longer hidden when I hover over a menu button in the top bar. This results in the bottom right corner of th ...

jquerycss

Using Bootstrap 4, create a responsive design that centers images within a div on mobile devices and positions them differently

I am currently working on a DIV that contains social media buttons. The code for this DIV is as follows: <div class="redes-sociales col-sm-pull-6 col-md-6 col-lg-push-4 float-right py-2"> <img class="img-rounded img-social" alt="f ...

htmlcssbootstrap-4

Tips for adjusting this CSS to be compatible with Internet Explorer

This CSS code I have was created specifically for Firefox compatibility. /* Green header */ .container { background: linear-gradient(#5FA309, #3B8018); position: relative; display: inline-block; padding: 0 20px 0 10px; width: 270px; ...

css

Having trouble with the initial tap not being recognized on your mobile browser?

When using mobile web browsers (specifically chrome and firefox on iOS), I am experiencing an issue where the hamburger menu does not trigger when tapped for the first time. For a simplified version of the HTML/CSS/JS code, you can check it out at: https ...

javascripthtmlcssmobile

Enhance Your Highcharts Funnel Presentation with Customized Labels

I am working on creating a guest return funnel that will display the number of guests and the percentage of prior visits for three categories of consumers: 1 Visit, 2 Visits, and 3+ Visits. $(function () { var dataEx = [ ['1 Vis ...

javascriptjqueryhtmlcsshighcharts

Tips on narrowing the left margin of a div when the size of the contained element becomes too large

I am facing a challenge in formatting text on the web that contains equations embedded as SVG images. To address this issue, I have replaced the SVG elements with fixed-sized div in the example provided below. The SVG element is nested within a div specifi ...

htmlcss

Struggling with aligning Bootstrap 5 navbar items to the right while keeping the brand on the left side?

I'm struggling to align the items to the right on my navbar. No matter what I try, they just won't budge from the left side next to my brand logo. Here's the code I'm working with: <nav class="navbar navbar-expand-lg navbar-dar ...

htmlcssnavbarbootstrap-5

Tips for merging two classes in CSS

Within my code, I have two classes named classA and classB. I am looking to have classB inherit the style of classA while still only using classB. .classA{ width:100px;} .classB{ height:100px;} <div class="classB"></div> ...

htmlcss

What is the best way to prevent a jQuery hover event from adding a text-shadow to the CSS?

Currently, I am facing an issue with a jQuery event that triggers a text-shadow effect: $(".leftColumn").hover(function (){ $(".leftColumn h2").css("text-shadow", "0px 2px 3px rgba(0, 0, 0, 0.5)"); },function(){}); The problem arises when the text-shad ...

javascriptjqueryhtmlcss

I'm attempting to resize my images to fit within the container, but instead they appear enlarged

I'm struggling to get my images to resize based on the container size, especially when viewed on tablets or phones. The current result is that the images are too zoomed in and I can't figure out what's causing this issue. ...

htmlcss

Inserting multiple rows of data into a MySQL database in a single page using only one query in PHP

This snippet shows a MySQL query being used to update and insert data into a database: if ($_POST["ok"] == "OK") { $updateSQL = sprintf("UPDATE attend SET at_status=%s, at_remarks=%s WHERE at_tt_idx=%s", GetSQLValueString ...

javascriptphpjquerymysqlcss

Position the table footer on the right side of the page

I am trying to format a table with footer items in HTML. I want the first footer item to be aligned left and the rest to be aligned right. Here is the desired layout: https://i.sstatic.net/ZRNEp.png table { width: 100% } <table class="price-list" ...

htmlcss