Issue with IE10: hyperlink unable to be clicked within transformed division

Encountering an issue with clickable divs in IE 10 while using CSS3 transitions and transforms on them. Despite animating correctly, the links are not functioning. This problem seems to be exclusive to IE 10 as it works fine in IE 11, Firefox, and Chrome. Additionally, the anchor does not work in IE 9 and below, but this is expected since those versions do not support CSS transitions.

I won't include my lengthy CSS code here, but I've provided a fiddle for comprehensive viewing.

HTML:

<div class="grid">
    <figure class="effect-bubba columns large-4">
        <img alt="" src="http://www.blackduckmn.com/_images/home/blackduck-minnesota-apple.JPG" />
        <figcaption>
             <h2>Lodging &amp; Dining</h2>

             <p>Blackduck offers a variety of lodging and dining options for every taste!</p> <a href="/visit/lodging-and-dining">View more</a>

        </figcaption>
    </figure>
</div>

JS Fiddle: http://jsfiddle.net/phorden/oysn4rgv/

Live Page:

htmlcsscss-transitionsinternet-explorer-10css-transforms

Answer №1

It seems like there is a strange issue in Internet Explorer where the anchor element needs a background to be clickable. You can try adding a dummy background to your anchor tag rules to solve this problem.

.grid figure a {
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0px;
    opacity: 0;
    display: block;
    z-index: 100000;

   background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBR‌​AA7") 0 0 repeat;
}

Check out the top comment under the answer linked below for more insights: absolute positioned anchor tag (with no text) not clickable in IE

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

Eliminate the lower boundary of a divisional table

I'm having an issue with displaying images in a div table. Each image has a border at the bottom, which is around 2-5 pixels wide. Unfortunately, as a new user, I am unable to send any images. My main goal is to remove this unwanted border from the ...

htmlinternet-explorer-8bordercss-tables

Tips for adjusting the dimensions of an SVG background within an element using the gulp-svg-sprite npm package

My current project involves the use of an NPM package called gulp-svg-sprite, which consolidates all my SVG images into a single file named sprites.svg and also generates sprites.css. Within the sprites.css file, there are CSS classes that define their ba ...

htmlcsssvggulp

Drag a dropdown menu to the bottom left corner and set it to full width on mobile using CSS

Check out this code snippet with CSS and HTML: CSS .flyout { position: absolute; top: 30px; right: 15px; background-color: #FFF; padding: 20px; border: 1px solid #eaeaea; z-index: 999; width: 400px; border-top: 3px solid #337AB7; disp ...

jqueryhtmlcsstwitter-bootstrap

I have a desire to use Javascript to control CSS styles

Within the CSS code below, I am seeking to vary the size of a square randomly. This can be achieved using the Math.random() property in Javascript, but I am uncertain how to apply it to define the size in CSS. #square { width: 100px; height: ...

javascriptcss

Determine the output by applying a constant value to the input

I'm having an issue with a loop function. The goal of the code is to allow users to enter a quantity of goods they want to buy, and then JavaScript calculates a fixed value based on the chosen quantity, which should be printed out. This functionality ...

javascripthtmlcss

populating a HTML image tag 'src' attribute with data extracted from API javascript code

Hey there! I'm currently working on integrating an image element from the openweatherAPI that corresponds to the weather icon retrieved from the JSON data when a user inputs a city. This means displaying images like scattered clouds or clear skies bas ...

javascripthtmljsonapiopenweathermap

Learn the method for attaching bargraph bars to the bottom without specifying a fixed height

I've been struggling to create a bar graph displaying visitor statistics. The challenge lies in attaching the bars to the bottom without knowing their exact height beforehand. Since my code uses percentages for the height and it fluctuates each time y ...

htmlcss

End of ImageButton tag

I am currently working on this code : <div runat="server" class="slide"> <img src="images/picto_detail.gif" onclick='<%# Eval("CampagneRappelId","hideshow(\"details{0}\")")%>' /> <div id='details<%# Eval("C ...

javascriptc#htmlcss

Incorporate a Google map into a table row by extending it across all table data cells

Apologies for the vague title, I am having trouble articulating my issue. Nevertheless, I am dealing with a complex HTML table structure as displayed below: <div *ngFor="let item of result; let i = index"> <table ...

htmlangular

Retrieve content inside an iframe within the parent container

Hey there! I've been working on adding several iframes to my webpage. Each iframe contains only one value, and I'm trying to retrieve that value from the parent page. Despite exploring various solutions on Stack Overflow, none of them seem to be ...

javascripthtmliframeinnertext

Eliminate the gap between the header and the content of the page

I'm trying to fix the issue with my header having extra space above it. I want it to be flush against the top of the page. Attached is an image showing the problem. https://i.sstatic.net/nIFaw.jpg Take a look at my code below: body { background ...

htmlcss

The HTML page seems to have a glitch where it does not recognize the ID's specified in the

Feeling like an HTML and CSS newbie as I encounter my first roadblock. In my attempt to code, I have both my CSS and HTML files saved in the same directory using Notepad++. However, every time I try to open the HTML file in a browser, the specified ID in ...

htmlcss

How can I set a default radio button selection when the page is loaded?

Input your radio button code below: <ion-radio ng-model="data.gender" ng-required="true" ng-value="'male'">Male</ion-radio> <ion-radio ng-model="data.gender" ng-required="true" ng-value="'female'">Female</ion-rad ...

angularjshtml

Displaying a preloaded image on the canvas

Once again, I find myself in unfamiliar territory but faced with the task of preloading images and then displaying them on the page once all elements (including xml files etc.) are loaded. The images and references are stored in an array for later retrie ...

javascripthtmlcanvas

Just beginning my journey with coding and came across this error message: "Encountered Uncaught TypeError: Cannot read property 'value' of null"

As a newcomer to the world of coding, I am excited about working on a side project that allows me to practice what I am learning in my courses. My project so far is a temperature calculator that incorporates basic HTML and JS concepts. My goal is to improv ...

javascripthtml

Struggling to create a 3x4 grid using Bootstrap - any tips?

I am attempting to design a grid layout for displaying 12 images in a squared items format. My initial idea was to create a grid with 4 rows and 3 columns, but I have been unsuccessful in my attempts so far. Despite searching for tutorials and guides, I ha ...

htmlbootstrap-4

Removing CSS from an HTML document using Gulp

My Web App is built using Angular and I encountered an issue with Gulp. Every time I add a new custom CSS line to my HTML file and run Gulp, it automatically removes that line from the file. <!--MATERILIZE CORE CSS--> <link h ...

htmlcssangularjsgulpmaterialize

Preventing jQuery slideToggle functionality from toggling multiple elements at once

I am currently working on a project where I have a series of images with captions that appear underneath each one. To show or hide the caption for each image, I am using slideToggle when the image is clicked. $('.imageholder').click(function() ...

javascriptjquerycssslidetoggle

Retrieving custom attribute values during a drop event in Jquery drag and drop operations

I'm currently working on a moodboard creator, but I've hit a snag while trying to transfer the values from custom attributes of an image to a new div once the drop action is completed. Every time the drop is finished, it always fetches the value ...

jqueryhtml

Executing Basic Authentication in Javascript through window.open()

After a user logs into my app, they have the option to download a CSV file from the server by clicking on a button. The URL for the download is secured with basic authentication. When attempting to open the URL using the code below: window.open('http ...

javascripthtmlajaxbasic-authentication