I have implemented the from which works in Chrome, Firefox and IE, but don't know why it's not working in Safari ..
Here is my plunker.
There is a bug using Safari and if css contains:
-webkit-transition: border-color, box-shadow ease-in-out .15s;
(for example: form-controll in bootstrap uses it)
The form validation becomes invalid forever.
I used Safari on PC so I have no idea if it is also happen in Mac.
Related
My pretty simple web page has an internal stylesheet that contains:
BODY { font-family:Segoe UI; }
This works in Chrome and IE, on both desktop and mobile. Only for IOS/Safari, this doesn't work, I need an alternative font there (don't I?).
The issue: when I add any alternative font-family, Chrome on mobile no longer uses Segoe UI. E.g. when I change the style above to:
BODY { font-family:Segoe UI, Open Sans, sans-serif; }
then Chrome on mobile (tested under Oreo 8.1 with latest version Chrome) no longer uses Segoe UI. Using single or double quotes doesn't make a difference.
Any ideas about cause and/or solutions?
After looking better: on mobile, Chrome can't display 'Segoe UI'. When no alternative is mentioned in the stylesheet, Chrome chooses Roboto.
Page is not showing photos in a proper way in Firefox browser unlike other browsers which are working well , i'm using bootstrap 4
Chrome View
Firefox View
I solve the problem by adding class define the minimum width and height for images:
.img-nav{
min-width: 108px;
min-height: 64px;
}
it works well on all browsers.
I am having a strange issue with an img that only renders when the browser gets resized or dev tools are opened. The img has srcset and sizes attributes, and is inside a polymer template. It displays normally whithout the attributes, or outside of the Polymer shadow dom. The issue came up with Chrome 39, I believe, and is restricted to Google Chrome, where there are no polyfills at work anymore.
There are no errors in the console, naturally, status is 200 ok there. I am having no issues in Firefox or IE. My polymer version is 0.5.0, and I reported the issue at the Polymer github page, but maybe there is something else to it.
Lex
OK, I think I may have fixed this, though it is a bit silly that I had to do it this way. Originally I had written these with the combined declaration:
background: url(image-name.jpg) top center fixed;
When I write it long form it seems to work just fine.
background-image: url(image-name.jpg);
background-position: top center;
background-attachment: fixed;
If I have more time to look into it, I'll comment in any info I find on why this may be.
I am using the MediaElement.js Wordpress plugin in order to play MP3s on my homepage.
But on Internet Explorer 8 I have trouble with the plugin.
Instead of the play button and the volume button, it only shows a blocky rectangle.
I have tested on two different computers with the same result.
You can test it here: http://www.alatarmusic.com/noise-reduction/
It works fine with Firefox and with Safari on my iPhone. And I know, that other sites show up fine in my Internet Explorer. For example, the player on MediaElementJS.com looks correct. It seems, something is wrong with my homepage?
But what could be the reason for this?
Was having the same issue in IE7 as well as IE8:
The fix for me was making sure the filter style was reset:
filter: none;
Your style-sheet contains the following CSS:
.post .content button{background:linear-gradient(top,#ffffff 0%,#e9e9e9 100%);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#e9e9e9')";
Beautified:
.post .content button {
background: linear-gradient(top,#ffffff 0%,#e9e9e9 100%);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#e9e9e9')";
}
The last property, -ms-filter, is a proprietary CSS extension by Microsoft, which is only parsed by Internet Explorer.
The color #ffffff is white, and the color #e9e9e9 is light gray.
Because the effect does only work in Internet Explorer, only IE users will see a light-colored rectangle instead of a play button.
Setting the filter to none gives back the button:
This markup does probably effect other buttons in your Wordpress blog, so removing it might not be an option. Instead, you can add filter:none to the CSS for .mejs-button; e.g.:
.mejs-button{
filter: none;
}
I have been trying to play a bit with the CSS3 and build a Netscape logo purely out of CSS3 for training.
Here is the link:
http://alonbt.com/css3/netscape/
The thing is: In Firefox all looks well, but in Chrome something goes wrong. I assume this is the overflow:hidden I have - in Firefox it works but Chrome doesn't seem to render it well.
Any suggestions bout what might be the problem?
I've detailed this issue here: http://tech.bluesmoon.info/2011/04/overflowhidden-border-radius-and.html
In particular, you're being hit by https://bugs.webkit.org/show_bug.cgi?id=50072
The issue shows up in Safari too.
You can workaround this problem if you don't use relative positioning. Try getting rid of the 'position: absolute' CSS property and use negative margins instead (e.g. in your case, something like: 'margin: -204px 0 0 -475px;').
Pay attention however that you'll have to compensate somehow on item ordering (you no longer have control over z-index but you need it).
I had the same problem in Chrome on a Windows computer, a img in a div, with overflow:hidden on the div. On a Mac everything showed fine, but Windows Chrome ignored the overflow:hidden. My solution: -webkit-transform:scale(1); on the img (the child).