logo
down
shadow

Image 100% height of container - min-height behaves differently on Chrome/Safari


Image 100% height of container - min-height behaves differently on Chrome/Safari

By : Bee
Date : November 28 2020, 11:01 PM
should help you out Safari does it correctly, because of the wrong support for min-height by Chrome. If you need consistency, you must use vh, this way:
code :
img {
  width: 100%;
  min-height: 100vh;
  object-fit: cover;
}


Share : facebook icon twitter icon
CSS: Chrome interprets div with % height nested in div with min-height differently from other browsers

CSS: Chrome interprets div with % height nested in div with min-height differently from other browsers


By : fgrv
Date : March 29 2020, 07:55 AM
wish helps you I have the following page: , Workaround part is easy:
css line-height rendering differently in IE, Safari and Chrome

css line-height rendering differently in IE, Safari and Chrome


By : Stijn VL_
Date : March 29 2020, 07:55 AM
may help you .
In short: there are many fonts out there in which the linespacing values lead to inconsistencies across operating systems and across browsers.
Inline-block and line-height rendering differently on Chrome, Safari and Firefox

Inline-block and line-height rendering differently on Chrome, Safari and Firefox


By : V Sarawale
Date : March 29 2020, 07:55 AM
it helps some times I style code tags as follows: , you can also use vertical-align: middle; instead of line-height.
Safari css height: auto; and height: 100%; stretches image. Does not happen in firefox or chrome

Safari css height: auto; and height: 100%; stretches image. Does not happen in firefox or chrome


By : RightClick
Date : March 29 2020, 07:55 AM
To fix this issue In the fiddle example I see that the for 'figure img' selectors min-height property is set to 100% which makes the image stretch its height to the whole block. Remove that and it would work.
css: different column container height in Chrome & Safari (bootstrap 4)

css: different column container height in Chrome & Safari (bootstrap 4)


By : Олег Беляев
Date : March 29 2020, 07:55 AM
I wish this help you With the given code, this won't work on Safari.
The reason is quite simple, as when you set h-100 (height: 100% !important) on the inner div, that percent value will be based on the parent's set height, which in this case has none, hence the computed value will be auto.
code :
<link data-require="bootstrap@4.0.5" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />

    <h1>Hello Plunker!</h1>
    
    <div class="row">
      <div class="col-3 d-none d-sm-flex">
        <div class="w-100" style="background:red">
          123123
        </div>
      </div>
      <div class="col-3 d-none d-sm-flex">
        asdasdasd <br> asdasdasd <br> asdasdasd
      </div>
    </div>
.flex-1 {
  -webkit-flex-basis: 0;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}
.nopadding {
  padding: 0;
}
Related Posts Related Posts :
  • Align single and double-line containers
  • padding on child element moves parent element - CSS
  • HTML Video autoplay not working with bxSlider on Chrome
  • Why is the W3 Validator stating that there is a closing </p> with no opening one?
  • Set collapsing priority without applying flex to CSS items?
  • Unable to send canvas div to front
  • IE creates unnecessary offset on menu subitems
  • External media query for CSS not working in Chrome
  • Bootstrap align an item to left of a button
  • dynamic updating of HTML5 canvas
  • CSS: Deleting and ignoring respectively all previous properties?
  • h1, h2, h3 around Microdata markup
  • Angular 2 Checkbox Two Way Data Binding
  • Image to Fit Containing Div
  • Fixed width for table first column
  • How can I alter the formatting of pandoc footnote marks?
  • push is not a function Angularjs error
  • Angular2 Call method in Template
  • Stop playing video in iframe when modal is closed
  • Bootstrap. Can't change navbar link color. Even with ID
  • Making a position:absolute div stay in place on page resize
  • Can we reference contents of <defs> across multiple <svg> elements?
  • Kendo Chart Databinding - Local Json Data with schema
  • Box shadow appearing from right to left
  • BEM element nest naming and sass rule
  • How to vertically center text next to image?
  • Responsive full width input with button
  • Make three headings in line. One to be on the left, second on center and third on the right?
  • XPath for all child elements before a certain sibling?
  • How to prevent default Css scroll onclick and allow javascript event only?
  • CSS Media Query not accounting for screen density?
  • How to stop second navbar from overlapping fixed navbar at the top of the page
  • List Indentation same x-cord as header
  • Sending file input doesn't work
  • Scale div padding according to screen width
  • Flexbox doesn't work in summary tag
  • CSS - mobile responsive issue with absolute positioning
  • Align image slider at the same bottom using css (Slick Carousel library)
  • Input border CSS
  • Define a custom <a> tag in CSS?
  • How to write vertical text from bottom to top without using transform rotate?
  • Text sometimes warping, sometimes not
  • CSS Correctly positioning pseudo element
  • Center Cropping Image
  • How to wrap a block around a div tag?
  • How to make a tight cell around text and expand empty ones?
  • make exact padding on text
  • position:relative started working different than at first (asp.net)
  • Html does not display in 1/2 columns
  • Positioning shapes to website
  • overwrite another tag in CSS
  • How to calculate sum on change?
  • Why do the browsers automatically wrap text of a web page without any indication about how to do it?
  • Sizing and positioning a border property
  • How do I float div's to the bottom of a page?
  • Responsive html with absolute position text inside relative positon picture
  • Flexbox doesn't work in IE 10
  • AngularJS shopping cart app: Disable button when quantity < 2
  • How to select element by order ? - Css
  • How to apply animation on the list items such that during an instance of time only one list item is visible?
  • shadow
    Privacy Policy - Terms - Contact Us © soohba.com