Compatibility discrepancies for object-fit: cover as per observations from Mozilla and caniuse

I'm curious about the browsers that support the CSS property object-fit: cover. My usual sources for checking compatibility are the Mozilla browser compatibility table and caniuse, but they sometimes provide conflicting information. For example, while Mozilla indicates that Chrome for Android version 31 supports it, caniuse says version 84 is the minimum supported. What could be causing this discrepancy?

How can I test the object-fit: cover property for Chrome for Android version 55? Tools like lambda do not allow for selecting a specific mobile browser (unlike desktop) and only show the latest version available.

In the long run, which resource should I trust more for future reference?

https://i.sstatic.net/Rse6l.png https://i.sstatic.net/VAxc3.png

csscross-browserobject-fitchrome-for-androidcaniuse

Answer №1

Yes, they are a match.

The black bar on CanIUse indicates the current version of the browser (green means supported). Meanwhile, Mozilla lists the first version that supported the feature. The message conveyed by both sources is essentially the same. However, Mozilla expects users to deduce which recent versions are currently in use among their audience.

If CanIUse does not display "previous" versions, it suggests that there isn't enough testing data available. In such cases, Mozilla appears to provide more detailed information. It is worth noting that Chrome has maintained feature parity across platforms for an extended period, making it generally safe to follow the desktop column.

If you wish to utilize a feature only when it is supported by a browser, consider using @supports as shown below:

@supports (object-fit: cover){ 
/* CSS styles for compatible browsers */ 

}

These functions similarly to media queries by overriding previous definitions and possessing lower specificity.

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

Resizable icon next to inline element caused width adjustment

I have a group of individuals listed, each with two elements side by side: a "contact me" button (an 'a' element with a fontawesome icon) and a tag displaying the user type (span element). Some users do not have a tag, and when there is one prese ...

htmlcssinline

What are some effective ways to analyze jQuery and JavaScript using web development tools?

I'm struggling to use web development tools to inspect the JavaScript on websites. It's challenging to identify which parts of a site are utilizing JS, unlike CSS or HTML where it's more visibly defined. Even when I attempt to delete some J ...

javascriptjqueryhtmlcssweb-developer-toolbar

Tips for retrieving selected items in an array object

Within my UI, I have a select field that, on change, populates corresponding data in a div with nested ul and li elements. What I am attempting to achieve is to convert the selected items within the list (which include checkboxes) into an object of arrays ...

javascriptjqueryhtmlcss

Seamless transition of lightbox fading in and out

Looking to create a smooth fade in and out effect for my lightbox using CSS and a bit of JavaScript. I've managed to achieve the fading in part, but now I'm wondering how to make it fade out as well. Here is the CSS code: @-webkit-keyframes Fad ...

javascriptcsslightboxtransition

To prevent the animation from overflowing, set the parent element to have hidden overflow while still displaying the child element

I am facing an issue with two menus that can be toggled using a switch. Each menu item has a dropdown that appears when clicked. The problem arises when switching between the menus, as there is an animation for the transition (slide in and slide out). I wa ...

javascripthtmljquerycss

How to Create a Speech Bubble in SVG Using SnapSVG

In the process of developing a chat program, I have animated figures moving across the screen engaging in conversations. One crucial aspect I am yet to implement is creating scalable speech bubbles for when users interact. Being relatively new to SVG and ...

javascriptcsssvgsnap.svg

The transparent DIV/waiting message may not be displayed in IE10

Here is a DIV container that serves as a transparent background with a loading message. This is the HTML code for the DIV container: <div id="generatingexcel" style="display:none; position: fixed; width: 100%;height: 100%; z-index: 999; top: 0; left: ...

jqueryhtmlcssajaxinternet-explorer-10

Positioning elements absolutely within a Material-UI Grid component

Is there a way to align a Material-UI icon with text so that the lowest point of the icon starts exactly at the baseline? We are using Material-UI Grid layout. The issue we are facing is that if we align the icon using 'baseline', it appears too ...

cssreactjsmaterial-ui

How to position elements within a content block in HTML with a CSS stylesheet

Looking for guidance on how to align text and image within a block in HTML using only a .css file. Specifically, I need the text to be on the left side and the image on the right. Since I am new to CSS, I could use some direction on where to start. Any t ...

htmlcss

Create an animated underline for two CSS tabs

I'm interested in learning how to create a similar animation using JS, jQuery, or Vue Transitions with Bootstrap. I want to achieve the effect of moving the line under TAB1 to the right when TAB2 is clicked. Can anyone guide me on animating the div sm ...

jquerycssvue.jsbootstrap-4

designing alternating rows within a table

Can I apply styles to alternating rows in an HTML table using only element hierarchy selectors and avoiding style names? I am tasked with styling the HTML output generated by a server component, which does not include styles for alternate rows. While I co ...

csscss-selectors

Two-column dropdowns without the use of tables

I am looking to create a drop-down menu with the following structure: | Heading ---------------- action | Item action | Item action | Item action | Item The action could represent "Change" and Item could be something like "Users". To maintain ...

htmlcss

How to exclude elements nested inside another element using CSS or XPath techniques

Presented here is a snippet of XML code: <xml> <section> <element>good</element> <section class="ignored"> <element>bad</element> </section> </section> </xml> Identifying a ...

cssrubyxmlxpathcss-selectors

Ensure that the remaining space on the page is filled by utilizing 2 divs

I am currently in the process of developing a website that needs to be responsive on all pages. The layout consists of 5 divs positioned horizontally. The three middle divs have fixed sizes - 200px, 400px, and 200px respectively. However, I am facing a cha ...

csshtmlscreenfill

Troubleshooting problem with navigation tabs in Bootstrap version 3.x

My bootstrap component nav-tabs works fine on desktop when the page width is larger than necessary for the row. However, on mobile devices, the responsive design doesn't behave as expected and the tabs become misaligned. You can see the issue in the c ...

csstwitter-bootstrapresponsive-designtwitter-bootstrap-3frontend

Using the power of Selenium's XPath, we can easily navigate through a table to access

Looking for assistance in creating selenium xpath for the various column links within a table. Each row has a unique identifier and contains information about a product, including the name. Based on the product name, I need to locate other links within the ...

cssxpathselenium

The People and Groups selection dialog is displaying incorrectly in IE 10

I've been working on a Sharepoint web application and have created a site column of type “People or Group”. This should be automatically associated with a user selection dialog as shown below: However, as you can see in the image above, the users ...

javascriptjqueryhtmlcsssharepoint

When bullet points are aligned in the middle of wrapped text instead of the top line

When using bullet points on my Joomla site for a long sentence that wraps to multiple lines, I noticed that the bullets align with the middle of the wrapped text rather than staying flush with the top line. For example, if the text wraps to 3 lines, the bu ...

css

Rapid HTML coding dilemma

Currently, I am in the process of quickly marking up my webpage. One issue I am facing is that I would like my title to be displayed below my <nav> tag instead of beside it. Can anyone provide guidance on how to achieve this? Here is the current HT ...

csshtml

Conceal YouTube upon opening any model or light box

I have a YouTube video in the center of my page, and when I click on any link from the side navigation, a lightbox appears. However, in IE, the lightbox is behind the YouTube video. I have tried setting the Z-index, but it doesn't seem to work. Is the ...

javascripthtmlcssyoutubelightbox