I'm trying to use the property height: -webkit-fill-available.
For that purpose I built this example https://codepen.io/anon/pen/VJoOWW
I'm using Ubuntu 18.04 and when I ran the code on Chrome, everything woks fine, but in Firefox I could not make it work.
My Firefox: Firefox Quantum 68.0, Mozilla Firefox for Ubuntu, canonical 1.0
EDIT1: Using width: -moz-available did little changes on the layout, but the image isn't displaying in the same way as chrome
EDIT2: The first image is correct (Chrome). The last image is displayed on Firefox, I would like to display the image on Firefox in the same way as Chrome
It seems like you are trying to fit the image inside the containing div. You can do that with well-supported CSS properties. There are many ways, here is one.
.block {
border: 1px solid red;
height: 85px;
}
.img {
margin-bottom: 10px;
max-height: 100%;
}
<div class="block">
<a href=''>
<img class ="img" src="https://s3.amazonaws.com/monetostatic/email/white-label/ustrike/logo_header.png">
</a>
</div>
you can simply give a height: inherit; to your <img> and of course to its wrapper <a> and you'll see it works exactly like chrome.
also, remove width: -moz-available; its useless here.
and with this approach, you won't need height: -webkit-fill-available; anymore.
hope it was helpful.
Related
I have a 128px image with a border-radius to make it appear rounded (I'm actually using the .is-rounded class from Bulma to do this). This is the resulting CSS on the image:
.image img.is-rounded {
border-radius: 9999px;
}
This works in Firefox but in Chrome, the image is hidden.
If I change it to the following, it works:
.image img.is-rounded {
border-radius: 63px;
}
But anything beyond 63px, the image is hidden again:
.image img.is-rounded {
border-radius: 64px;
}
You can see this on my personal website here: https://dominick.cc/
Chrome 110.0:
Firefox:
I updated Chrome to 110.0.5481.100 and it seemed to resolve it. Weird!
I am using the CSS cursor property with custom images specified with URLs.
However, when doing this on Chrome, white dots appear around the cursor image.
If we look at the image below, you can see the problem on google chrome.
This does not happen on other browsers. Such as firefox:
Here is the link to the cursor images used:
http://imgur.com/a/dooCC
I thought originally that the issue would be that semi-transparency is used in the image. But the image has no semi-transparency at all.
What is going on here, and how would I fix something like this?
Thanks.
I tried to reproduce this example using Chrome 52.0 on Mac OS X 10.11, but I am not seeing the jagged white edges. Does this snippet show the jagged white edges for you?
.cursor-test {
height: 200px;
width: 100%;
}
#cursor-test-1 {
background-color: red;
cursor: url('http://i.imgur.com/jaYSPxo.png'), auto;
}
#cursor-test-2 {
background-color: blue;
cursor: url('http://i.imgur.com/aFU13SN.png'), auto;
}
<div id="cursor-test-1" class="cursor-test"></div>
<div id="cursor-test-2" class="cursor-test"></div>
Update: Here's an animated gif screenshot of how it looks for me. I attempted to capture a regular screenshot, but OS X seems to hide custom CSS cursors in screenshots.
http://jsfiddle.net/36ykrp9x/5/
HTML
<div class="container">
<button>O</button><button>O</button>
</div>
CSS
.container {
width: 100%;
background-color: rgb(120, 200, 200);
text-align: center;
}
button {
border: 0;
width: 3rem;
height: 3rem;
opacity: 0.8;
background-color: gray;
}
This above code best captures the visual bug I am interested in solving. I should note that this does not appear to affect Firefox or Safari's latest versions. I am currently on Chrome 39. If you are on a retina display and a recent version of Chrome and do not already see the thin line between the elements, try resizing the window a bit. A thin line between the buttons will flicker in and out of presence.
For my purposes, there is at least one element above the button group in the hierarchy with 100% width, and the buttons must be horizontally centered within it. The buttons themselves must have opacity between 0 and 1. They can be divs, or any other element for that matter - but I have indeed tried others and found the problem remains.
Unfortunately, centering the button group within a fixed-width element doesn't appear to solve this issue for me, as the fixed-width button group must ultimately also be centered somehow which appears to resurrect the issue. Nudging with margins can lead to overlapping which is more obvious with elements that have such opacity - which is really no better than having the gap in the first place.
It is worth noting that indeed using background-color: rgba(r,g,b,a) addresses the problem for most intents and purposes, but I am very interested in resolving this without it if only to see that it's possible.
I am not particularly interested in solutions that involve JavaScript. Am I out of luck?
Based on the information you provided, and my own experience with Google Chrome, I'm led to the suggestion that this is a browser bug in Chrome, considering it only occurs in Chrome on a Retina screen, and other browsers such as Safari and Firefox do not exhibit the problem. Your HTML and CSS looks perfect so I don't see issues here.
You can verify that this is a browser rendering issue by also checking this in a latest version of Opera (on your Retina display), as Opera now uses the same Blink rendering engine as Chrome (which is forked from Webkit). If Opera exhibits the same issue then its a Engine issue which should be logged as a bug.
Unless someone else figures out a way around it, I am normally inclined to leave browser rendering bugs like this alone where possible so that you're not hacking code in your site, and when the bug is fixed, you don't have to do anything to your site.
The problem is with jsfiddle.net. I have the same 1 pixel space in Chrome 40 on retina. Try this: http://dabblet.com/gist/c0068a79fc0268482ee1
or the following code, loaded directly:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.container {
width: 100%;
background-color: rgb(120, 200, 200);
text-align: center;
}
button {
border: 0;
width: 3rem;
height: 3rem;
opacity: 0.8;
background-color: gray;
}
</style>
</head>
<body>
<div class="container">
<button>O</button><button>O</button>
</div>
</body>
</html>
/*CSS for line*/
#line{
position: absolute;
top: 181px;
height: 1px;
width: 100%;
background-color: #E2E2E2;
}
HTML:
<div id="line"> </div>
I made a 100% width 1px line element using   to run through the bottom of my horizontal navigation menu - it was all fine until I tried it out in Safari and saw that it was off by 5 pixels, when I adjusted accordingly, it became off in Chrome and IE by 5 pixels - is there a way to mediate the problem to satisfy all three browsers?
You could determine your browser, and depending on your browser you can add a class to your <body>. Then you can define separate css rules for the different browsers. For instance, if your browser is safari and safari is the class, then:
body.safari #line {
/*...*/
}
and so on with the other browsers as well.
EDIT:
In php you can use get_browser() in a function to determine the browser.
In Javascript the value you are looking after is navigator.appName.
I need to make my google map V3 a full circle. I use CSS3 border radius on it, but it works correctly in Firfox only, others just leave it rectangular. Here are the codes:
<div class="map mapCircle" style="position: relative; background-color: transparent; overflow: hidden;">
<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%;">
...
</div>
</div>
</div>
and CSS:
.map.mapCircle {
width: 476px;
height: 476px;
}
.mapCircle>div>div:first-child {
-moz-border-radius: 238px;
-webkit-border-radius: 238px;
border-radius: 238px;
}
Yes, I know, I could use some overlay images with background color. But the real problem is that background is not only-color. It changes based on its content, and usually is a gradient. Is there a way to make Chrome and other wabkit-based browsers and Opera (I don't have any hopes about IE) to render it same way as FF does?
My site. Look to the very bottom of the page.
UPD: just tested in IE9, and it renders OK. What's wrong with the webkit and Opera?
UPD 2: I used OverZealous's andwer and figured out that it works only in Safari. Chrome assepts PNG masks only, Opera is not webkit at all. Any more ideas are needed
It appears that you may be experiencing the same Webkit bug as noted here: Rounded corners fail to cut off content in webkit browsers if position:relative
Also here: CSS3 border-radius clipping issues
I tested this by (via a debugger) modifying your code to add a visible border to the node with the border radius, then I hide the contents. It clearly showed a circle for the outer element. Since Webkit is used in both Safari and Chrome, that would explain those. However, when testing it inside Opera, I seem to be seeing the same bug.
Now, some good news: you might be able to get Webkit to behave using -webkit-mask and an SVG circle. There is an example on this page: http://www.webkit.org/blog/181/css-masks/
This would get you support under Firefox, Safari, and (hopefully) Chrome. (And apparently IE9, since you just tested it!) Which, for all accounts, is about the best you can usually hope to achieve for CSS3 hacks. ;-)