Options of select field are moving away from selected field inside the lightbox only on mozilla and working fine on Chrome.
Codepen demo
Add below CSS
.custombox-show.custombox-sign .custombox-modal-content {
transform: none;
transform-style: initial;
}
Codepen demo
Related
I am trying to use this Mega menu, but I want to know what is the problem that safari doesn't support this menu and doesn't open the menu when clicking on it.
Here is the codepen link
I think this part is the problem not oppening the menu
`
// FUNCTIONALITY: Open mega menu
&:focus {
~ ul {
display: flex;
transform-origin: top;
animation: dropdown .2s ease-out;
}
}
`
Do we have a list to check if any CSS att. is not compatible with Safari or not?
Or is it a way to make this menu work on Safari by just changing some parts of the CSS?
I found the solution:
it was an easy fix.
an element that you want to have :focus on it, should have tabindex att like:
first
second
Then it will work on Safari and other browsers.
I want to use a custom cursor on hover for links. It works fine on Safari and Firefox, but on Chrome it jumps back to the default cursor for a millisecond, and then goes to my custom cursor.
Codepen: https://codepen.io/ford1234/pen/vwzRgJ
I've recreated the problem in Codepen but it also happens on the site I'm applying it to.
<div>
<p>Hello</p>
</div>
<style>
html {
cursor: url('http://telephoneavenue.art/wp-content/uploads/2019/02/black-01.png'), auto;
}
a:hover {
cursor: url('http://telephoneavenue.art/wp-content/uploads/2019/05/blacktriangle-small17px.png'), auto;
}
Expected result: A transition from the circle to the triangle.
Actual result: A transition from the circle, to the default hand pointer, to the triangle.
remove ":hover" on your selector.
your selector must be;
a{
cursor: url('http://telephoneavenue.art/wp-content/uploads/2019/05/blacktriangle-small17px.png'),
auto; }
Have you tried out a transition-duration or a transition-delay? This is used to define the duration of a specified transition. This is the length of time it will take for the targeted element to transition between two defined states.
.example {
transition-duration: 0s;
// or
transition-delay: -1s;
}
Also keep in mind that some features are only supported by certain versions of the browser.
I want all elements that are links to show consistent behavior.
a:hover { opacity: 0.5; }
This works in IE and Firefox, but the opacity (and associated CSS transition) is not properly applied to the child elements of the <a> tag in Chrome and Safari. If I add an explicit rule for a <div> as a child element, it works in Chrome and Safari:
a:hover, a:hover div { opacity: 0.5; }
So far so good, and this has been asked and answered before. The problem that I have is that by adding the rule for the containing <div>, the opacity gets applied twice in IE and Firefox, making the element too transparent.
I need to cover both scenarios - <a> wrapping a <div> or not, without writing lots of explicit CSS rules. How can I do that?
http://liveweave.com/fMsz7m
What worked for me in Safari was adding display: block into the a tag
a:hover {
opacity: 0.5;
transition: opacity 0.2s ease;
display: block;
}
I'm not sure whether this counts as a direct solution to your question (I'm not sure why the children aren't inheriting), but you can add display: block to the a in your css which will work (tested with Firefox and Chrome).
JSFiddle DEMO
An alternative is to assign the hover to your <div>, parent of <a>.
JSFiddle DEMO
I feel as though there are better solutions/explanations out there, maybe this one will spark an idea for someone else.
I have buttons to zoom-in or zoom-out content. In firefox cursor works well (its like magnifier with +). But in chrome I have default cursor. This is my code:
.button.zoom-in {
...
cursor: zoom-in;
}
Can someone help me, why that works in forefox and in chrome not? Also, other cursors like help, move, pointer... works in chrome too.
For Chrome you have to use the prefixed-property-value:
.button.zoom-in {
...
cursor: -webkit-zoom-in;
cursor: zoom-in;
}
Here is a jsfiddle.
This page from Mozilla is an excellent reference to different cursors as well as browser compatibility for each.
For the zoom-in and zoom-out cursors, the following should work for Chrome 1.0+, Firefox 1.0+, Opera 11.6+ and Safari 3.0+. Zoom-in/out is not supported by IE.
.button.zoom-in {
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;
cursor: zoom-in;
}
I have code that works in Chrome and Firefox, but not in IE8.
<a href="javascript:void();" class="shareActionLink" id="comment">
<img src="comment.gif" class="shareActionImage" />Comment
</a>
The CSS for this is:
.shareActionLink:link, .shareActionLink:visited
{
margin-right:8px;
color:#999;
opacity:0.6;
filter: alpha(opacity=60); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=60)"; /*IE8*/
background-color: #fff;
}
#shareActionsBox .shareActionLink:hover
{
color:#333;
text-decoration:none;
opacity:1.0;
filter: alpha(opacity=100); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /*IE8*/
}
Based on other StackOverflow posts, I added the IE filters, which helped to adjust the text opacity, however, the image opacity still doesn't change in IE. It works fine in other browsers.
I suspect that this is happening because the img is nested within the link. How do I get the image to change opacity in IE??
Thanks
MS filters only work in IE7 if the hasLayout property is set to true, they only work in IE8 on block elements, or if you set the display property to block or inline-block.. as you're trying to use this on an inline element, the a, then setting display: inline-block; should solve it for all IE's as it works to set hasLayout for IE7 and also keeps IE8 happy
.shareActionLink {
display: inline-block; /* IE needs but shouldn't hurt anyone else */
}
.shareActionLink:link, .shareActionLink:visited {
margin-right:8px;
background: #fff;
color:#999;
opacity:0.6;
filter: alpha(opacity=60); /* IE */
}
.shareActionLink:hover {
color:#333;
text-decoration:none;
opacity:1.0;
filter: alpha(opacity=100); /* IE */
}
Off the top of my head, setting opacity on a parent element means it's children elements get, erm, opacitied? as well.
To target the image specifically, add img after each of the css selectors; e.g.:
#shareActionsBox .shareActionLink:hover img
to target the image whenever the parent link is something (in this case when hovered).
I could not get this to work in IE6 without targeting the <img> element. I've not got IE8 installed so cannot be sure this demo will work in that browser. However, it does work in IE6, Chrome11 and Firefox4.
Also, it is worth noting that if your comment.gif has transparency then you may have further problems with the transparent part unless you set a background-color or use JavaScript to handle the hover. See another answer I wrote on this.