Safari's approach to image height measurement

I am experiencing an issue with some images in Safari. While they display correctly on other browsers, the images are appearing too high on Safari.

You can view the website at development.mar-bakker.nl

<div class="col-xs-12 col-sm-4 col-md-4">
                <div class="grid wow zoomIn">
                    <figure class="effect-bubba">
                        <img src="assets/images/item-2.jpg" class="img-responsive" alt="img01"/>
                        <figcaption>
                            <h2>Webshop <span>PC4U</span></h2>
                            <p>Lily likes to play with crayons and pencils</p>
                        </figcaption>           
                    </figure>
                </div>

            </div>

Here is the CSS being used:

    figure.effect-bubba {
    background: #9e5406;
}
figure.effect-bubba img {
    opacity: 0.7;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

... (CSS continues)

If anyone has experience or advice on how to fix this issue, I would greatly appreciate it!

htmlcsssafari

Answer №1

After some investigating, I've located the issue! It was caused by a different CSS element.

.grid figure figcaption, .grid figure figcaption > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Answer №2

Consider eliminating the restrictions on max-width and min-height specified in the .grid figure img selector


    .grid figure img {
    position: relative;
    display: block;
    /* min-height: 100%; */
    /* max-width: 100%; */
    opacity: 0.8;
    }

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

Which is better for creating a curved plane surface: CSS3 or Three.js?

Is it possible to achieve a curved plane surface resembling the one shown in the image using CSS3 or Three.js? ...

css3dthree.js

Show the cell data when the checkbox next to it is selected

I have a specific table setup and I am trying to display the content of the table cell if its corresponding checkbox is checked upon clicking a button. For example: If Row2 is checked, an alert box should display Row2 Below is my code snippet, Java ...

javascriptjqueryhtmlcss

IE 11 struggling with improper alignment of Flex Container

Having an issue with this code snippet: It works in Chrome, Firefox, and Edge but not in Internet Explorer 11. There are 3 elements (red, yellow, green) stacked vertically, with a blue element overlaying them taking up 50% of the height. Expected result: ...

htmlcssinternet-explorerflexbox

Adding a conditional to target a bootstrap modal in AngularJS

I am facing a situation where I need a modal to only appear when specific conditions defined in my controller are met, rather than every time a button is clicked. Here's the HTML CODE: <button class="btn btn-primary-outline" type="button" data-uk ...

javascripthtmlcssangularjstwitter-bootstrap

Creating an appealing navbar in React by skillfully integrating the image logo and brand name for a

Having some trouble positioning my logo on the top left corner of the navbar. It keeps ending up in an awkward spot alongside the brand name. https://i.stack.imgur.com/XZjV9.png If anyone has any tips on how to properly align the logo and brand on the na ...

htmlcssreactjsmaterialize

Tips for creating a grid design with evenly spaced row gaps

I am currently working on a grid layout featuring cards of varying heights. My goal is to maintain a consistent gap between the cards, creating a mosaic-like design. I am utilizing Styled Components for this project, but the current code I have doesn' ...

cssreactjsstyled-components

Setting up Capybara with Safari Technology Preview in Ruby is a breeze with just a few simple

Encountering difficulty establishing a session with Safari Technology Preview (STP) through Capybara and Selenium. The browser window fails to open as expected. Recently updated to Ruby 2.3.0, Capybara 2.14.2, and Selenium 3.4.0 Obtained STP from https: ...

rubyseleniumsafaricapybara

Updating the src of an iframe and adding an onclick event to a link using JavaScript

Looking to design a page that accommodates both login and sign up functionalities by dynamically updating the src of an iframe. In the navigation bar, there is: <li id="change"><a onclick="sign()">Sign up</a></li> And within the ...

javascripthtmlfunction

What could be causing my JavaScript code to malfunction, even though it appears to be coded correctly?

// JavaScript Document "use strict"; $(window).scroll(function(){ if($(window).scroll() > 100){ $("#scrollTop").fadeIn(); } }); $(window).scroll(function(){ if($(window).scroll() < 100){ $("#scrollTop").fadeOut(); } }); $(document).ready(function() ...

javascripthtmlcss

What steps do I need to take to create a custom image for a website?

I'm looking for a way to create a website image using just code, without the need for an actual image file or image tag. Is there a method to do this? Would I use CSS, Javascript, or HTML5 for this task? If using JavaScript to dynamically generate the ...

javascriptcsshtml

Tips for aligning an image on top of another image

Here is the code I am working with (also pasted below). My goal is to create a layout with two columns, where the first column features two images and the second column displays some text. In the first column, I specifically want the first image to have a ...

htmlcss

Adjust the initial scroll position to - apply overflow-x: scroll - on the specified element

I have an image that can be scrolled to the right on screens that do not fit the full width, but I want the center of the image to be displayed first instead of the left side. Below is my React code: import React, { useEffect, useRef, useState } from &qu ...

javascripthtmlcssreactjs

A unique approach to handling ngdisabled for fields that are required only

Starting off with a requirement to disable the submit button when a required field is left empty. <form name="form"> <input type="text" placeholder="First Name" data-ng-model="model.firstName" name="FirstName" ng-required="true" /><br/> ...

javascripthtmlangularjs

Conceal the main div when the nested div does not contain any content

Is there a way to hide the parent div EventsRollup when the child div RelatedEventsList is empty? <div class="EventsRollup"> <span class="EventsRollupTitle">CPR &amp; Health Safety Classes</span><br /><br/> ...

javascriptjqueryhtmlhide

Error found - PHP if condition inside HTML td element

Whenever I open my browser, I encounter this error message: Parse error: syntax error, unexpected 'if' (T_IF) I have been working on creating an HTML table to display prices for a Woocommerce product. Although I've come across similar issu ...

phphtml

Extracting textual information from Wikipedia through iframes?

Currently, I am working on a website project utilizing Squarespace. This site will feature multiple pages dedicated to individuals who have reached a level of notability worthy of having their own Wikipedia page. With over 150 pages planned, manually writi ...

javascripthtmlcssiframewikipedia

"The issue with jQuery not functioning properly is isolated to a particular HTML file

I'm encountering a strange issue with jQuery as a beginner. It seems that my jQuery code is not functioning properly on the HTML file I created for the website's homepage. Surprisingly, when I test the same jQuery code on a blank HTML file, it wo ...

jqueryhtml

Is it possible to detect when a user reaches the end of a div without using a scroll event?

Seeking a JavaScript solution that can identify when a user reaches the bottom of a div with overflow: auto. While there are numerous solutions on Stack Overflow utilizing the onscroll event, I am curious if this can be accomplished using newer technology ...

javascripthtmlscroll

Ways to apply attributes to specific images using a JQuery array

I'm struggling to add attributes to multiple images using a jQuery array. Can anyone provide some assistance? <div id="result"> <img src="Image1" width="300"/> <img src="Image2" width="300"/> <img src="Image3" width="300"/> ...

jqueryhtml

Displaying data table details through a modal window

After coming across this specific example online, I attempted to implement it myself. Unfortunately, the modal feature does not seem to be functioning as expected. Interestingly, when testing it on jsfiddle, everything works perfectly. Further investigati ...

jquerycsstwitter-bootstrap-3datatable