Bootstrap column links not functioning properly in IE/MS Edge upon page load

I recently encountered an interesting problem with my Bootstrap landing page. While it functions perfectly in Chrome and Safari, I discovered that some links cannot be clicked when using Microsoft's Edge Browser.

You can view the live page at Slice Virtual Golf

Upon further investigation, it appears that only links inside Bootstrap col- parents are affected, and oddly enough, resizing the browser window or opening developer tools seems to resolve the issue.

I have searched for similar issues and even reached out to a Microsoft support engineer who suggested a clean boot as a solution, but that seems extreme for what appears to be a bug.

If anyone has experienced this issue or is able to review the code, please share your findings as this strange behavior needs to be addressed. Thank you!

htmlcsstwitter-bootstrapinternet-explorermicrosoft-edge

Answer №1

This issue seems to be a glitch specifically affecting Internet Explorer and Microsoft Edge browsers. After some investigation, I have identified that the problem lies in the temporary application of overflow: hidden to the body along with the floated or positioned layout of the links situated below the visible area. It appears that IE/Edge interpret these links as inaccessible due to the presence of the overflow: hidden style.

To simplify the scenario, I have created a stripped-down version of your webpage:

<!DOCTYPE html>
<html style="overflow-y: scroll; height: 100%;">
    <head></head>
    <body style="margin: 0; height: 100%">
        <a style="float: left; position: relative; margin-top: 1000px" href="#">Link</a>
        <script type="text/javascript">
            document.body.style.overflow = "hidden";
            setTimeout(function () {
                document.body.style.overflow = "visible";
            }, 2000 );
        </script>
    </body>
</html>

This particular setup leads to malfunctioning links located below the fold.

A bug report has been submitted to the Microsoft Edge team for further examination.

Keep tabs on this issue here: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7843412/

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

Missing 'Include in Project' option for ASP.Net Core project

After setting up my Asp.Net Core project in VS 2015 Update 3 and installing 'twitter bootstrap' through npm, I encountered an issue when trying to include the "bootstrap" folder into my project. The "Include in project" option was not showing up ...

twitter-bootstrapvisual-studio-2015npm

Adjusting the content of a span causes the parent element to shift to the left

I'm having trouble finding a solution to a specific issue that seems to be only affecting Chrome. Whenever I try to replace the text in a span element, it causes the parent anchor to shift left. You can see a demonstration of this problem here: http:/ ...

htmlcssgoogle-chrome

Is it better to have a heading titled "Navigation" above a <nav> element, or should it be included inside the navigation element itself?

Which is the better way to structure navigation: <h1>Navigation</h1> <nav> <ul> <li>...</li> </ul> </nav> Or: <nav> <h1>Navigation</h1> <ul> <li>...</li> ...

htmlaccessibilitysemantic-markup

What happens when Google Polymer platform is used without defining _polyfilled?

My attempt at creating a simple example using Google Polymer's platform.js is running into an error message that says: Uncaught TypeError: Cannot read property '_polyfilled' of undefined This is what I'm attempting to achieve: <cur ...

javascripthtmlpolyfillspolymerweb-component

"Utilizing the ng-class directive in AngularJS to apply multiple

I have been attempting to utilize the ng-class directive in AngularJS based on a certain condition: if a JSON value is 1, it should display as green; if it's 2, red; and if it's 0, white. However, I am unable to achieve the desired result for som ...

cssangularjs

Tips for manipulating the DOM: Pushing existing elements when new ones are dynamically created with JavaScript

I have a pre-existing DOM element (let's say a div) and I am using JavaScript, specifically React, to create a new element - another div which serves as a sidebar. The goal is for the sidebar to seamlessly shift the previous element without overlappin ...

javascripthtmlcssreactjs

CSS Dynamix - Include the parameter ?value to resolve caching issues

I came across a discussion on the issue of Dynamic CSS caching problem where it was suggested to append ?value to the end of the css file name for better caching. I am currently using themes and the css files are loaded automatically. Is it possible to use ...

csscachinghttphandler

Transferring JSON data from Django for visualization on a D3 graph

I'm currently working on customizing a D3 bar graph found at http://bl.ocks.org/3885304 to accommodate JSON data from Django. In Django, I have a variable that holds JSON formatted data like this: [{"score": 1, "color": "blue"}, {"score": 5, "color": ...

javascripthtmldjangotemplatesd3.js

The arrangement and hue of elements using CSS styling

I am seeking to create a unique design with a predominantly gray background, accented by a smaller blue background within it. The design concept is illustrated below: <body> <div id= "background_1"> <div id= "background_2"> < ...

htmlcsspositioning

Tips on replacing views within ion-view and updating the title in the title bar to match the injected page through the use of Ionic and AngularJS

I am new to ionic and angular JS. I am currently working on a simple app within the ionic framework. My goal is to inject an HTML template into the ion-view tag using ngRoute. However, I am facing issues as my code is not successfully injecting the HTML te ...

htmlangularjsionic-framework

adjusting the position of a dynamic JavaScript panel

When trying to make a box slide in from the bottom instead of the top left, I encountered some issues with the code. After altering the CSS position and changing the code that adjusts the position, the sliding effect stopped working. It seems like there mi ...

javascriptjqueryhtmlpopup

Executing $(this).parent().remove() triggers a full page reload

A unique feature of my webpage is that with just a simple click of a button, users have the ability to dynamically add an endless number of forms. Each form contains fields for user input and also includes a convenient delete button. var form = " Name ...

javascriptjqueryhtml

Align title text to the right within the Material Design Card

I have implemented a Material Design (MDL) card to showcase numeric values in the title. However, I am facing an issue where the values are left aligned by default and I want them to be right aligned. Despite trying various styles, they are being ignored ...

cssmaterial-design

The CSS styling from the Angular parent form-control Bootstrap is not being inherited by the child component

I have developed an autocomplete child component that I am integrating into a parent component. However, when I try to apply Bootstrap form-control validation in the parent component, it does not seem to affect this child component - which is essentially a ...

cssangularbootstrap-4

The description in the lower design must not be on the same line or at the same height as the element

I'm facing an issue with CSS regarding achieving the same height. I have a list of designs, each with a description at the bottom. While I've successfully aligned the designs vertically between portrait and landscape orientations, the problem ari ...

htmlcssbootstrap-4

Using CSS to conceal an element when a different element is also invisible

My inquiry is as follows: I currently possess a code that conceals class element 1 when it possesses a specific value (which varies across different sites). Now, my objective is to also conceal class element 2 ONLY IF class element 1 is already hidden. ...

csshideelement

Make sure to always target a specific DIV element, regardless of whether any of its child divs are

I have a div named "box" nested inside another div called "container." When I click on the box, I am able to retrieve its ID perfectly. However, when I click on the container, I want to obtain the ID of the box instead of the container. Is there a way fo ...

jqueryhtmlangular

I am having issues displaying my background image

I'm experiencing an issue where my background image isn't displaying correctly. Here is the CSS code I'm using: body { background-image: url('img/bg.png'); background-repeat: no-repeat; } ...

css

Navigating Maps in a PhoneGap iOS App

Regarding the issue mentioned in this link I am attempting to find a specific location on the native iOS map using the URL below: window.location = "maps:Greensboro+NC" However, it opens the map at my current location instead of the specified location. ...

ioshtmlcordova

What could be causing the Bootstrap Navbar toggle icon button to not display navigation items when clicked?

Bootstrap has been a reliable tool for my projects until I encountered an issue in an Angular project. The navbar toggler icon button is visible, but clicking on it does not display the navigation items. <div> <nav class="navbar navbar-ex ...

htmlcssbootstrap-4angular-ui-bootstrap